vue router學(xué)習(xí)之動態(tài)路由和嵌套路由詳解

更新時間：2017年09月21日 15:16:03 作者：0day__

本篇文章主要介紹了vue router 動態(tài)路由和嵌套路由，詳細(xì)的介紹了動態(tài)路由和嵌套路由的使用方法，有興趣的可以了解一下

本文主要參考：https://router.vuejs.org/zh-cn/essentials/nested-routes.html

本文的閱讀前提是已經(jīng)能夠搭建一個vue前臺程序并且運(yùn)行。如果還么有搭建可以參考文章：
http://m.fzitv.net/article/111650.htm

好，下面上貨。

首先介紹一下動態(tài)路由。
動態(tài)路由按照我的理解，就是說能夠進(jìn)行頁面的跳轉(zhuǎn)，比如說：下面的這個頁面中：

<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中就會加載對應(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 
  } 
 ] 
})

也就是說，會跳轉(zhuǎn)到Hello和Foo這兩個組件。

那么嵌套路由是什么意思呢，最開始我以為的是這樣：/hello/foo 和/hello/foo2這兩個路由可以簡寫成嵌套路由，其實(shí)不是的。嵌套路由只的是，在子組件中再次嵌套組件。然后在使用路由進(jìn)行跳轉(zhuǎn)，這樣跳轉(zhuǎn)的時候，變化的就只有子組件，而外邊的父組件沒有變化。

下面我把完整的例子放出來，看一下：

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é)顯示子組件。
我把頁面截圖一下：