---

VueRouter系列的文章示例編寫時，專案是使用vue-cli腳手架搭建。

專案搭建的步驟和專案目錄專門寫了一篇文章：點選這裡進行傳送

後續VueRouter系列的文章的示例編寫均基於該專案環境。

---

 VueRouter系列文章連結

　　《VueRouter爬坑第一篇》-簡單實踐

　　《VueRouter爬坑第二篇》-動態路由

　　《VueRouter爬坑第三篇》-巢狀路由

---

 閱讀目錄

一.前言

二.動態路由配置

　　1.配置動態路由

　　2.配置動態路由對映到的元件

　　3.編寫可跳轉的URL

　　4.介面效果

　　5.多段路徑引數

---

一.前言

　　在《VueRouter爬坑第一篇-簡單實踐》中，我們探究瞭如何從一個url路由到某個元件，我們將上一篇的路由配置程式碼在看一下 　　

// vue-router使用第一步：引入vue-router
import Vue from "vue"
import Router from "vue-router"

// vue-router使用第二步：元件註冊到全域性
Vue.use(Router)

// 第三步：定義路由配置
// 引入路由需要對映的元件
import Index from '@/components/Index.vue'
const routes = [
    {
        path: '/index',   // 匹配的URL
        component: Index  //對映的目標元件
    }
]

// 第四步：建立vue-router例項，傳遞前面定義的路由配置
const router = new Router({
    routes: routes
})

// 第五步：將vue-router例項使用export匯出（供其他模組使用）
export default router

　　可以看到routes中配置的那一條路由path選項為'/index'，那麼能匹配到的url就只能是'/index'，而在實際開發中的url可能會是多種多樣的。

　　假如我們存在一個需求：多種路由需要同時匹配到同一個元件，那麼這個時候就需要動態路由來解決這個問題。

二.動態路由配置

1.配置動態路由

　　動態路由的配置相對也比較簡單,我們現在在router.js中新增一條動態路由的配置(為了看得清楚，我們將上一篇中寫在router.js檔案中的註釋刪掉)。 E:\MyStudy\test\VueDemo\src\router\router.js  

 1 import Vue from "vue"
 2 import Router from "vue-router"
 3 Vue.use(Router)
 4 
 5 // 引入路由需要對映的元件
 6 import Index from '@/components/Index.vue'
 7 const routes = [
 8     {
 9         path: '/index',  // 具體的路由
10         component: Index //對映的目標元件
11     },
12     //新增一條動態路由
13     {
14         path: '/pageContent/:id',   // 動態路由
15     }
16 ]
17 const router = new Router({
18     routes: routes
19 })
20 
21 export default router

 

　　我們可以看到我們新增了一條路由配置，path設定為：'/pageContent/:id'，其中冒號就表示路由中可變的部分，冒號後的id表示引數的內容。想這樣的路由就可以匹配到像'pageContent/212310、'pageContent/212311'這樣的url。

2.配置動態路由對映到的元件

　　現在我們需要給這條動態路由配置它對映的目標元件，在這之前我們需要新建一個元件：PageContent。 E:\MyStudy\test\VueDemo\src\components\PageContent.vue

<template>
    <div>  
        <h1>這裡是PageContent元件</h1>
        <h3>$routes.params = {{$route.params}}</h3>
        <h3>$routes.params.id = {{$route.params.id}}</h3>
    </div>
</template>
<script>
export default {
    name: 'PageContent'
}
</script>

　　 備註：這裡我們可能看到了$route.params這個寫法，這塊在官方文件中有介紹：動態路由設定的引數會被設定到$routes.params中。

　　　　   我們為了在PageContent中區分模板是從不同的路由渲染出來的，所以使用了$routes.params獲取到了動態路由的引數並展示在模板中上。

 

 　　接來下給動態路由配置它對映的目標元件PageContent

E:\MyStudy\test\VueDemo\src\router\router.js 

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

// 引入路由需要對映的元件
import Index from '@/components/Index.vue'
import PageContent from '@/components/PageContent.vue' 
const routes = [
    {
        path: '/index',  // 具體的路由
        component: Index //對映的目標元件
    },
    //新增一條動態路由
    {
        path: '/pageContent/:id',   // 動態路由
        component: PageContent  //動態路由對映的目標元件
    }
]

const router = new Router({
    routes: routes
})

export default router

3.編寫可跳轉的URL

　　我們依舊還是在HelloWorld.vue元件中編寫url，並且需要使用<router-view>告知URL的渲染位置 E:\MyStudy\test\VueDemo\src\components\PageContent.vue

<template>
  <div class="hello">
    <p>這裡是HelloWorld元件</p>
    <!-- 可跳轉的URL -->
    <router-link to="/index">點選這裡渲染Index元件</router-link>
  
    <router-link to="/pageContent/212310">點選這裡渲染pageContent元件</router-link>
    <router-link to="/pageContent/212311">點選這裡也可以渲染pageContent元件</router-link>
    
    <!-- 使用下面的這個標籤可以告訴vue-router將匹配到的元件渲染到這個位置 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  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>

 

4.介面效果

 

 

 

 

 

 

 

 

　　可以看到當url為：/pageContent/212310 時，成功的匹配渲染了PageContent元件，同時從$routes.params中獲取動態路由中設定的id引數值：212310；

　　當url為：/pageContent/212311 時，也成功的匹配渲染了PageContent元件，同時從$routes.params中獲取動態路由中設定的id引數值：212311

 5.多路徑引數

　　前面的例項中我們只設置了id一個引數，vue-router還支援多段的路徑引數，這裡也比較簡單，我們就不寫例項實踐了，具體的配置方法如下（來自官網截圖）：

 

 完結！！！！！！！

&nbs