vue嵌套路由完成导航栏

没学习router之前，一直想不明白，只要一点击我的导航栏菜单，就会跳转到对应的页面，但是导航栏不见了，要回到首页才有导航，这该怎么解决。如下：
首页：

Paste_Image.png

点击菜单之后，导航栏不见了 😱

Paste_Image.png

看了官方文档之后就都明白了，

Paste_Image.png

具体的实现方式就是在组件的模板添加一个 <router-view> 喽，
自己动手：

Paste_Image.png

然后router.js这样配置：

export default new Router({
  routes: [
    {
      path: '/home',
      name: '首页',
      component: Home,
      iconCls: 'el-icon-message',
    },
    {
      path:'/',
      name:'导航。',
      component:Nav,
      children:[
        {
          path:'/scroll',
          name:'滑块',
          component:scrollcontainer,
        },
        {
          path:'/md',
          name:'md',
          component:Md,
        },
        {
          path:'/water',
          name:'water',
          component:Water,
        }
      ]
    }
  ]
})

运行，查看效果

nav.gif

over!
demo链接:https://github.com/ssdpj/mk/tree/vue-admine