本文主要參考：https://router.vuejs.org/zh-cn/essentials/nested-routes.html
本文的閱讀前提是已經(jīng)能夠搭建一個(gè)vue前臺(tái)程序并且運(yùn)行。如果還么有搭建可以參考文章：
//m.survivalescaperooms.com/article/111650.htm
好，下面上貨。
首先介紹一下動(dòng)態(tài)路由。
動(dòng)態(tài)路由按照我的理解，就是說能夠進(jìn)行頁面的跳轉(zhuǎn)，比如說：下面的這個(gè)頁面中：
<template> <div id="app"> <header> <router-link to="/">/</router-link> <router-link to="/hello">/hello</router-link> <router-link to="/cc">/cc</router-link> </header> <router-view style="border: 1px solid red"></router-view> </div> </template>
如果點(diǎn)擊了/hello，那么在router-view中就會(huì)加載對應(yīng)的模塊，也就是在路由中設(shè)置的模塊。
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: '/', 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 } ] }) 也就是說，會(huì)跳轉(zhuǎn)到Hello和Foo這兩個(gè)組件。
那么嵌套路由是什么意思呢，最開始我以為的是這樣：/hello/foo 和/hello/foo2這兩個(gè)路由可以簡寫成嵌套路由，其實(shí)不是的。嵌套路由只的是，在子組件中再次嵌套組件。然后在使用路由進(jìn)行跳轉(zhuǎn)，這樣跳轉(zhuǎn)的時(shí)候，變化的就只有子組件，而外邊的父組件沒有變化。
下面我把完整的例子放出來，看一下：
App.vue
<template> <div id="app"> <header> <router-link to="/">/</router-link> <router-link to="/hello">/hello</router-link> <router-link to="/cc">/cc</router-link> </header> <router-view style="border: 1px solid red"></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> Foo.vue
<template> <div> <h1>3434234343</h1> </div> </template> <script> export default { name: 'Foo', data () { return { } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> Foo2.vue
<template> <div> <h1>this is Foo2</h1> </div> </template> <script> export default { name: 'Foo2', data () { return { } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> Foo3.vue
<template> <div> <h1>this is foo3</h1> </div> </template> <script> export default { name: 'Foo3', data () { return { } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> Hello.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li><a rel="external nofollow" target="_blank">Core Docs</a></li> <li><a rel="external nofollow" target="_blank">Forum</a></li> <li><a rel="external nofollow" target="_blank">Gitter Chat</a></li> <li><a rel="external nofollow" target="_blank">Twitter</a></li> <br> <li><a rel="external nofollow" target="_blank">Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a rel="external nofollow" target="_blank">vue-router</a></li> <li><a rel="external nofollow" target="_blank">vuex</a></li> <li><a rel="external nofollow" target="_blank">vue-loader</a></li> <li><a rel="external nofollow" target="_blank">awesome-vue</a></li> </ul> <div> <router-link to="/hello/foo">/hello/foo</router-link> <router-link to="/hello/foo2">/hello/foo2</router-link> <router-link to="/hello/foo3">/hello/foo3</router-link> </div> <router-view style="border: solid 1px blue"></router-view> </div> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> 路由：
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: '/', 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 } ] }) 需要注意的是仔細(xì)的看App.vue和Hello.vue中，都包含<router-view></router-view>，但是他們的作用不同，App.vue是頂層路由，指的是組外層的路由，Hello.vue中的是嵌套路由，負(fù)責(zé)顯示子組件。
我把頁面截圖一下：
這個(gè)界面，點(diǎn)擊最上邊的 / 或者/hello 或者/cc的時(shí)候，發(fā)生變化的是紅色路由中的內(nèi)容。當(dāng)點(diǎn)擊/hello/foo /hello/foo2 /hello/foo3 的時(shí)候，發(fā)生變化的是下面藍(lán)色路由中的內(nèi)容。
這樣就和我們平時(shí)應(yīng)用十分的相似了。最外層于有變化，或者局部有變化，但是不想全局的發(fā)生改變。
同時(shí)，這樣也符合了模塊化，各個(gè)模塊分別在不同的模塊中。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
