冇事来学系--Vue2.0中动态路由分配

---

theme: Chinese-red

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

概念

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性

在vue-router中使用英文的冒号(:)来定义路由的参数项

```js // 路由中的动态参数声明,冒号后面是动态参数的名称 {path: '/movie/:id', component: Movie}

// 上面的代码将以下3个路由规则合并成了一个，提高了路由规则的复用性 {path: '/movie/1', component: Movie}, {path: '/movie/2', component: Movie}, {path: '/movie/3', component: Movie} ```

使用动态路由时，如何具体的判别是哪一个组件？

如何获取动态参数？

方法一：通过this.$route，即路由的 参数对象

js // 需求：在movie组件中，根据id的值展示对应电影的详细信息 // 在Movie组件中，打印this，输出的是Movie组件实例对象 // 在对象中有一个$route属性，值是一个对象。该对象中有一个params属性，属性值就是保存 我们设置的动态参数 的对象 params: {id: 1} // 则通过this.$route.params.参数名,可以获得当前路由对应的参数的值(this.$route.params.id)

方法二：使用自定义属性props

配置路由规则的时候，要开启props传参，来获取动态参数的值**

```js // 在当前项目的路由模块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 ```

```js // 在Movie组件中

Movie组件 --- {{this.$route.params.id}} --- {{ id }}

```

---

注意1：在hash地址中，/ 后面的参数项，叫做"路径参数"

在路由“参数对象”中，需要使用this.$route.params来访问 路径参数

注意2：在hash地址中，问号?后面的参数项，叫做“查询参数”

在路由“参数对象”中，需要使用this.$route.query来访问 查询参数

``` // 通过查询参数传递数据

// 传递的数据可以通过$route.query来获取 ```

注意3：在this.$route中，path属性是路径部分；fullpath是完整的地址

如：path的值是/movie/1 ; fullpath的值是/movie/1?name=zs&age=20

跋尾

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