VueRouter爬坑第二篇-動態路由

時間 2019-11-29

標籤 vuerouter 第二動態路由欄目系統網絡简体版

原文原文鏈接

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

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

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

VueRouter系列文章連接vue-cli

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

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

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

閱讀目錄3d

一.前言code

二.動態路由配置component

　　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/2123十、'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>