VueRouter爬坑第二篇-动态路由
VueRouter系列的文章示例编写时，项目是使用vue-cli脚手架搭建。
项目搭建的步骤和项目目录专门写了一篇文章：点击这里进行传送
后续VueRouter系列的文章的示例编写均基于该项目环境。
VueRouter系列文章链接
阅读目录
一.前言
二.动态路由配置
1.配置动态路由
2.配置动态路由映射到的组件
3.编写可跳转的URL
4.界面效果
5.多段路径参数
一.前言
在《VueRouter爬坑第一篇-简单实践》中，我们探究了如何从一个url路由到某个组件，我们将上一篇的路由配置代码在看一下
// vue-router使用第一步：引入vue-routerimport 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