VueRouter爬坑第二篇-動態路由

---

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

項目搭建的步驟和項目目錄專門寫了一篇文章：點擊這里進行傳送

后續VueRouter系列的文章的示例編寫均基於該項目環境。

---

 VueRouter系列文章鏈接

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

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

　　《VueRouter爬坑第三篇》-嵌套路由

---

本篇文章完整代碼

　　https://github.com/JEmbrace/VueRouter/tree/DynamicRoute

---

 

閱讀目錄

一.前言

二.動態路由配置

　　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  

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

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

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\HelloWorld.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還支持多段的路徑參數，這里也比較簡單，我們就不寫實例實踐了，具體的配置方法如下（來自官網截圖）：