构建站点全局导航时（在路由器视图之外），app.vue 中的 this.$route.params 为空

Posted 2023-02-22

【中文标题】构建站点全局导航时（在路由器视图之外），app.vue 中的 this.$route.params 为空

【英文标题】：this.$route.params is empty in app.vue when building site global navigation (outside of router-view)

【发布时间】：2020-08-26 17:25:44

【问题描述】：

我有 vue 设置并且工作正常，我可以路由到页面，并且它们在路由器视图组件中正确显示。我可以在页面内的组件中访问 this.$route.params.xyz，但是，当尝试在组件中访问时，例如全局导航，params 集合为空。

当前路由 URL 是 localhost:5011/forum/2/details 其中 2 是一个 id 值。我可以在页面上愉快地访问 2 进行一些本地路由，但我想要一个设置页面，可以在全局菜单上使用。

  title: 'Forum Settings ',
  icon: 'mdi-cogs',
  text: 'Forum Settings ' + this.$route.params.id,
  route: 
    name: 'ForumSettings',
    params: 
      id: this.$route.params.id
    ,
  ,
,

但是，params 是 并且 id 是未定义的。

我怎样才能做到这一点？

route.js：

    path: '/forum/:id/settings',
    name: 'ForumSettings',
    component: ForumSettings,
    meta: 
        authorize: true,
    ,
,

在页面本身作为测试：

<dr-btn
    text="Settings"
    :to=" name: 'ForumSettings', params: id: this.$route.params.id"
>
    <v-icon>mdi-cog</v-icon>
</dr-btn>

这很好用。

在 app.vue 中：

mounted() 
    console.info('Mounted Router', this.$route);
,

这不是当前的 URL，因此此时似乎没有设置路由器。如何获取当前路由的论坛id（如果在其他页面，设置链接会被隐藏，所以如果实际上没有id，则没有菜单项）

【参考方案1】：

我有同样的问题。我通过将我的逻辑转移到导航守卫来解决它 (https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)

例如：

const routes = [

path: '/',
name: 'Home',
beforeEnter:async() => 
  let loggedIn = await store.checkIfLoggedIn()
  if (loggedIn) router.push(name:'Dashboard')
  return true
,
component: () => import('../views/Home.vue')
,

path: '/dashboard',
name: 'Dashboard',
beforeEnter:async() => 
  let loggedIn = await store.checkIfLoggedIn()
  if (!loggedIn) 
    router.push(name:'Home')
  
  return true
]

【参考方案2】：

您可以使用 vuex 商店。让需要设置的页面将 id 参数传递给 vuex 变量，让导航使用读取该 vuex 变量的计算属性。如果您还有更多工作要做，您还可以考虑使用一个库来将 vue 路由器与 vuex 同步。

【讨论】：

那么，此时还没有设置路由器？我在想主菜单，可能应该由应用程序的状态驱动，而不是动态路由

不是所有的路由都由 vue 路由器处理，主导航是路由器视图之外唯一的东西吗？

是的，所以如果在 URL 中有一个 ID 为 5 的路由，我无法从 view-router 组件之外的组件中获取它。作为站点结构的一部分的主导航位于视图路由器组件之外。它在 view-router 组件中显示了正确的内容，只是从主导航访问它时参数似乎是空的。

我刚刚为自己设置了一个测试场景，console.log(this.$route) 在主应用挂载钩子中为我工作。如果我删除 Vue.use(VueRouter) 它将停止工作你是否可能错过了告诉 vue 使用你导入的 vue 路由器常量？

抱歉，忘记最后一条评论，如果 Vue 没有被告知使用 Vue Router，则没有任何效果。我不知道你为什么没有看到挂载钩子中的参数。