Vue-router 不推送到给定的名称答案

【问题标题】：Vue-router do not push to the given nameVue-router 不推送到给定的名称
【发布时间】：2018-04-11 03:43:01
【问题描述】：

在我的项目中，我的路线：

const routes = [{
  path: '/',
  meta: {
    title: ''
  },
  component: (resolve) => require(['./views/index.vue'], resolve),
  children: [
    {
      path: 'a',
      name: 'a',
      title:'a',
      component: (resolve) => require(['./views/a/a.vue'], resolve)
    },
    {
      path: 'b',
      name: 'b',
      title:'b',
      component: (resolve) => require(['./views/b/b.vue'], resolve),
      children: [
        {
          path: 'c',
          name: 'c',
          title:'c',
          component: (resolve) => require(['./views/b/ccc.vue'], resolve)
        },
      ]
    },

  ]
}];

我的项目中有index.vue、a.vue、b.vue 和c.vue 组件。

我的index.vue 模板中有一个<Menu>：

<Menu mode="horizontal"  active-name="1" @on-select="select_item">
    <MenuItem name="a">
      <Icon type="ios-paper"></Icon>
      go to a
    </MenuItem>
    <MenuItem name="b">
      <Icon type="ios-people"></Icon>
      go to b
    </MenuItem>

    <MenuItem name="c">
      <Icon type="settings"></Icon>
      go to c
    </MenuItem>
  </Menu>

您会看到菜单 @on-select 绑定到 select_item 方法，并在脚本的方法中返回名称，并按名称推送到路由：

  select_item(name){
    console.log(name)

    this.$router.push({name: name})
  }

我单击 MenuItem go to a 和 go to b 一切正常，但是当我单击 go to c 时，它不起作用。

我检查了我的代码，但我不知道问题出在哪里。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您的b 和c 中有嵌套路由：

{
  path: 'b',
  name: 'b',
  title:'b',
  component: (resolve) => require(['./views/b/b.vue'], resolve),
  children: [
    {
      path: 'c',
      name: 'c',
      title:'c',
      component: (resolve) => require(['./views/b/ccc.vue'], resolve)
    },
  ]
},

index.vue 的<router-view> 是组件的顶部导出，在您的路由中是/a 和/b。 /b/c 应该在你的b.vue 的<router-view> 中。

要解决你的问题，你应该把你的

    {
      path: 'c',
      name: 'c',
      title:'c',
      component: (resolve) => require(['./views/b/ccc.vue'], resolve)
    },

与路由a和路由b同级。

或者，你应该在你的b.vue中添加<router-view/>，你可以看到效果。

【讨论】：