Vue路由器重复$路由信息答案

【问题标题】：Vue Router duplicate $route infoVue路由器重复$路由信息
【发布时间】：2018-06-01 17:20:54
【问题描述】：

我有这样的路线和子路线。

export default new Router({
  routes: [
    {
      path: '/user',
      component: UserView,
      meta: {title: 'User Manager'},
      children: [
        {path: 'editor', component: EditorView, meta: {title: 'User Editor'}}
      ]
    }
  ]
})

在UserView 和EditorView 中都有挂载函数。

export defaults {
  mounted () {
    console.log(this.$route)
  }
}

我在浏览器中输入http://host:port/#/user/editor，控制台打印两次$route 数据，它们是同一个对象。我如何获得UserView 路线数据？

{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}

UserView 和 EditorView 在同一页面中，它们的 html 看起来像这张图片。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

当涉及嵌套路由时，有多个路由部分与给定 URL 匹配。您需要搜索this.$route.matched 查找您感兴趣的具体路线。

如果您为您感兴趣的路线设置一个名称，它会更容易找到：

{
  path: 'editor',
  name: 'editor',  // <-- Add this
  component: EditorView,
  meta: {
    title: 'User Editor'
  }
}

mounted() {
  const route = this.$route.matched.find(r => r.name === 'editor');
  console.log(route.meta.title);
}

【讨论】：