「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

概念

动态路由指的是：把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

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖