VueRouter this.$route.query always empty

dkqlctbz 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(144)

我试图获取查询参数code，但是$route.query总是空的。我已经按照文档使用了函数模式。缺少什么？

路由器：

// use vue-router
import Router from 'vue-router'
Vue.use(Router)

// create router
const router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
      props: (route) => ({ code: route.query.code })
    }
  ]
})

Home.vue

<template>
  <div>
    <Navbar />
      <FlatHeader />
      <v-content>
        <ComingSoon />
        <Changes />
        <EmailSubscribe />   
      </v-content>
    <AuthorizationModal />
  </div> 
</template>

<script>
import AuthorizationModal from './components/AuthorizationModal';
import FlatHeader from './components/FlatHeader';
import ComingSoon from './components/ComingSoon';
import Changes from './components/Changes';
import EmailSubscribe from './components/EmailSubscribe';

export default {
  name: 'Home',
  components: {
    FlatHeader,
    ComingSoon,
    Changes,
    EmailSubscribe,
    AuthorizationModal
  },
  props: {
    code: {
      type: String,
      default: null
    }
  },
  methods: {
  },
  mounted() {
    console.log(this.$route)
  }
}

</script>

$route控制台输出：

vue.js

来源：https://stackoverflow.com/questions/56309617/vuerouter-this-route-query-always-empty

2条答案

按热度按时间

9cbw7uwe1#

我通过将Router上的模式设置为'history'来解决这个问题。

路由器：

// create router
const router = new Router({
  mode: 'history', // add 'history' mode
  routes: [
    {
      path: '/',
      component: Home,
      props: (route) => ({ code: route.query.code })
    }
  ]
})

赞(0）回复(0）举报 2023-03-24

ut6juiuv2#

在启用历史模式的Vue 3 + Vue Router 4.x上偶然发现了类似问题，因此接受的答案不适合。
找到了一个方便的router.isReady()，如果你等待Promise返回，它也可以解决这个问题：

<script setup>
onMounted(async () => {
  await router.isReady();
  console.log(router.currentRoute.value);  // all values have been initialized now
});
</script>

这对我很有效。引用相关文档了解更多细节：
isReady(): Promise<void>
返回一个Promise，当路由器完成初始导航时解析，这意味着它已经解析了与初始路由相关联的所有异步输入钩子和异步组件。如果初始导航已经发生，则Promise立即解析。
PS.在Vue Router 4.x中，历史模式是这样启用的：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  // ...
})

赞(0）回复(0）举报 2023-03-24

我来回答

VueRouter this.$route.query always empty

2条答案

相关问题

热门标签

最新问答