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存储实例中。

任何建议将不胜感激。

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']

VueJS：在范围之外使用$ router对象

3 个答案: