vue router学习之动态路由和嵌套路由详解(2)

import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Foo from '@/components/Foo' import Foo2 from '@/components/Foo2' import Foo3 from '@/components/Foo3' Vue.use(Router) export default new Router({ routes: [ {path: 'https://www.jb51.net/', redirect: '/hello'}, { path: '/hello', component: Hello, children: [ {path: '/hello/foo', component: Foo}, {path: '/hello/foo2', component: Foo2}, {path: '/hello/foo3', component: Foo3} ] }, { path: '/cc', name: 'Foo', component: Foo } ] })

需要注意的是仔细的看App.vue和Hello.vue中，都包含<router-view></router-view>，但是他们的作用不同，App.vue是顶层路由，指的是组外层的路由，Hello.vue中的是嵌套路由，负责显示子组件。
我把页面截图一下：

这个界面，点击最上边的 / 或者/hello 或者/cc的时候，发生变化的是红色路由中的内容。当点击/hello/foo /hello/foo2 /hello/foo3 的时候，发生变化的是下面蓝色路由中的内容。

这样就和我们平时应用十分的相似了。最外层于有变化，或者局部有变化，但是不想全局的发生改变。

同时，这样也符合了模块化，各个模块分别在不同的模块中。