接上次写的Vue cli入门，我们补充命名路由与嵌套路由

1、命名路由，需要修改2个文件

App.vue页面模板修改成如下：

<template><div id="app1"><img src="./assets/logo.png"><router-view class="viewone" name="a"></router-view><router-view class="viewtwo" name="b"></router-view><!-- <router-view ></router-view> --></div>
</template>
<script>
// export default {
//   name: 'app'
// }</script>
<style>
@import './assets/css/public.css';
#app1 {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}table {border: 1px solid #ccc;border-collapse: collapse;
}table tr th,
table tr td {border: 1px solid #ccc;padding: 6px;
}</style>

路由文件index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index/index'
import Manage from '../views/manage/index'
//import Index from '@/views/index/index'
//import Manage from '@/views/manage/index'//import OtherRouter from '../views/index/otherrouter'Vue.use(Router)
//const Foo = { template: '<div>嵌套路由</div>' }
export default new Router({routes: [// {//   path: '/',//   name: 'Hello',//   component: Hello// }{path: '/',name: 'Index1',components:{a:Index,b:Manage},},{path: '/manage',name: 'Manage',//component:Managecomponents:{b:Manage},}]
})

2、嵌套路由

只需修改路由index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index/index'
import Manage from '../views/manage/index'
//import Index from '@/views/index/index'
//import Manage from '@/views/manage/index'import OtherRouter from '../views/index/otherrouter'Vue.use(Router)
//const Foo = { template: '<div>嵌套路由</div>' }
export default new Router({routes: [// {//   path: '/',//   name: 'Hello',//   component: Hello// }{path: '/',name: 'Index1',component:Index,children:[{path:'', component:OtherRouter}]//components:{a:Index,b:Manage},//children:[{path:'', component:Foo}]},{path: '/manage',name: 'Manage',component:Manage//components:{b:Manage},}]
})