概念
动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性
在vue-router中使用英文的冒号(:)来定义路由的参数项
// 路由中的动态参数声明,冒号后面是动态参数的名称 {path: '/movie/:id', component: Movie} // 上面的代码将以下3个路由规则合并成了一个，提高了路由规则的复用性 {path: '/movie/1', component: Movie}, {path: '/movie/2', component: Movie}, {path: '/movie/3', component: Movie}
使用动态路由时，如何具体的判别是哪一个组件？
如何获取动态参数？
方法一：通过this.$route，即路由的 参数对象
// 需求：在movie组件中，根据id的值展示对应电影的详细信息 // 在Movie组件中，打印this，输出的是Movie组件实例对象 // 在对象中有一个$route属性，值是一个对象。该对象中有一个params属性，属性值就是保存 我们设置的动态参数 的对象 params: {id: 1} // 则通过this.$route.params.参数名,可以获得当前路由对应的参数的值(this.$route.params.id)
方法二：使用自定义属性props
配置路由规则的时候，要开启props传参，来获取动态参数的值****
// 在当前项目的路由模块src/router/index.js中 const router = new VueRouter({ // routes是一个数组，作用：定义hash地址与组件之间的对应关系 routes: [ // 重定向的路由规则 {path: '/', redirect: '/home'}, // 路由规则 {path: '/home', component: Home}, // 动态路由 要开启props传参，才可以通过 自定义属性 获取这个动态参数的值 // :id和:title就是传递的params参数 (由?开头，数据之间由&连接的是query参数) // props:布尔值，若布尔值为真，则该路由收到的所有params参数都以props的形式传给Movie组件 {path: '/movie/:id/:title', component: Movie, props: true}, {path: '/about', component: About, children: [ // children子路由规则 // 默认子路由：如果children数组中，某个路由规则的path值为空字符串，则这条路由规则就是 ‘默认子路由’ {path: '', component: Tab1}, {path: '/tab2', component: Tab2} ]} ] }) export default router
// 在Movie组件中 <template> <div class="movie-container"> <!-- this.$route是路由的"参数对象" --> <h3>Movie组件 --- {{this.$route.params.id}} --- {{ id }} </h3> <!-- 上面两个得到的id是一样的 --> </div> </template> <script> export default { name: 'Movie', props: ['id', 'title'], //接收props数据 } </script>
注意1：在hash地址中，/ 后面的参数项，叫做"路径参数"
在路由“参数对象”中，需要使用this.$route.params来访问 路径参数
注意2：在hash地址中，问号?后面的参数项，叫做“查询参数”
在路由“参数对象”中，需要使用this.$route.query来访问 查询参数
// 通过查询参数传递数据 <router-link to="/home/message/detail?id=666&title=你好啊"></router-link> // 传递的数据可以通过$route.query来获取
注意3：在this.$route中，path属性是路径部分；fullpath是完整的地址
如：path的值是/movie/1 ; fullpath的值是/movie/1?name=zs&age=20
