Vue Router重复$ route info

Question

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

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看起来像这张图片。

Answer 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);
}