Vue-cli(脚手架)，嵌套路由效果出不来？过来我教你

vue-cli搭建项目，嵌套路由出不来？

Vue-cli是项目中经常用到而且高效率的开发工具，而且经常会碰到路由的嵌套。但是奈何嵌套路由就是出不来，更可恨的是居然没有报错

稳住稳住，问题不大，我就是来度化你们的

先看看我写的错误的代码，有没有在这里面找到属于你们的影子

index.js文件

    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/Home',
      name: 'Home',
      component: Home,
      children: [{
        path: '/Nest',
        name: 'Nest',
        component: Nest,
      }]
    },
  ],

Home.vue文件中的template片段

<template>
  <div>
      这里是主页面的内容
  </div>
</template>

不，纠正一下这里是代码检错

index.js文件中：这里的子组件路径不需要加斜杠( / )，加了斜杠路径就会出错

Home.vue文件中：这里没有调用子组件，需要调用一下

然后再看一下我改完之后的代码

index.js文件

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/Home',
      name: 'Home',
      component: Home,
      children: [{
        path: 'Nest',			//  子组件的路径前面不需要加斜杠，去掉就好
        name: 'Nest',
        component: Nest,
      }]
    },
  ],

Home.vue文件中的template片段

<template>
    <div>
        这里是主页面的内容
        <router-view />		//  这里调用一下子组件
    </div>
</template>

这样就好了，路由嵌套就搞定了，可以正常显示了

有相同问题的小伙伴赶紧去试试吧，不懂得私聊我哟 >_<