VueJS:在$router对象的作用域外使用它

Question

前段时间，我在玩vue-router，它的工作原理如下：

routes: [{
        path: '/',
        name: 'home',
        component: Home,
        title: 'Home'
        icon: 'some font awesome icon here'
    },
    {
        path: '/about',
        name: 'about',
        title: 'About',
        component: () => import('../pages/About.vue'),
        icon: 'some other font awesome class'
    },

    ...

请注意title和icon属性。不知何故，我能够从我的一个组件中访问这些内容。

现在我似乎不能让它工作了。

我已经尝试了this.$route，它为我提供了当前路由，但我没有这些附加属性。

根据我的记忆，我没有使用props。如果有什么不同，我希望将它们发送到vuex store实例中。

任何建议都将不胜感激。

Answer 1

您可以使用meta属性来执行以下操作：

{
    path: '/',
    name: 'home',
    component: Home,
    meta: {
        title: 'Home'
        icon: 'some font awesome icon here'
    }
},

然后，您可以在组件中访问它，如下所示：

this.$route.meta.title;

Answer 2

为此，您可以使用route meta fields。如下所示：

  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: 'Home',
        icon: 'some font awesome icon here',
      }
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        title: 'About',
        icon: 'some other font awesome class',
      }
    }
  ]

Answer 3

您可以使用路由器props来实现此目的，如下所示：

{
    path: '/',
    name: 'home',
    component: Home,
    props : true // now you can bind props
}

然后，当您想要动态导航到一条路线时：

this.$router.push({
  name: 'home',
  params: {
    icon: 'some icon here',
    title: 'some title'
  }
})

在您的组件上：

props : ['icon','title']