VueRouter爬坑第二篇-动态路由

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 新增代码：13行-16行

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\PageContent.vue 新增代码：7-8行

<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>