第三十六节:Vue路由:Vue-router路由传参

前沿:

vue-router的路由跳转时传递参数有两种方式,:

1. 一种是路由参数, 通过定义动态路由传递参数
2. 另一种是通过query来传递参数,

在者,我们已经学习过的,路由的跳转主要有两大类:

1. 一类是组件的to跳转
2. 第二类编程是导航,通过js命令进行跳转

因此两种跳转方式, 组合两种传参方式, 就会组合出四种不同的写法

1. 动态路由传参

动态路由传参就是通过params进行传参:

动态路由传参说明:

1. 动态路由params 参数的路由定义格式 /router/:id
2. 在跳转路由是id的部分是动态变化的. 例如: /router/123, 传递的数据就是123

1.1 要实现下面的示例效果

示例展示:

params传参_图1.gif

示例分析:

1. 这个示例是在上一节示例基础上进行的扩充
2. 通过示例分析,是当我们点击不同的作者,要将作者的姓名传递到组件中
3. 通过同一个组件来接触不同作者的信息,展示不同用户信息

1.2 通过组件的to属性传参

1.2.1 实现效果代码

路由配置:

{
    path:'/about',
    component: About,
    children:[
         {
             path:':username',   // 动态路由配置
             component: User
          }
    ]
}

User组件获取params传参

但是在跳转路由的时候就会有不一样的地方了

之前讲过,通过组件跳转路由时,可以使用或不使用动态绑定to属性

1.2.2 router-link组件不使用动态绑定to属性

实现示例的About组件:

1.2.3 router-link使用动态绑定to属性

实现示例的About组件:

1.2.4 通过命名路由跳转

我们在动态绑定to属性时,也可以通过命令路由的跳转方式

1.3 通过编程路由导航传参

编程路由导航传参就是通过在方法中,通过js命令跳转路由并进行传参

1.3.1 普通的跳转传参

1.3.2 通过命名路由跳转

通过示例的展示,也了解到到了, params传递的参数其实是有限的, 通过来说就是一个字符串或者一组数字

如果希望以此多传递一点数据,就可以通过query方式进行传递

2. query方式传递参数

query方式传递数据说明

1. query方式传递数据,路由的配置就是普通路由配置/router,如果有其他特殊情况另说

2. 传递参数的方式 ,跳转路由时动态绑定的对象中使用query的key作为传递方式

3.1 示例图

query传参_图2.gif

示例图分析:

1. 在跳转路由的时候,不仅仅是将用户名传递过去
2. 还连带的将用户的其他信息传递过去

3.2 标签跳转路由方式

此时要注意,如果使用在组件进行路由跳转时传递query参数,

那么to属性只能通过动态绑定的方式传递

示例代码:

代码分析

1. 此时动态绑定的to属性中, name是通过命名路由进行跳转
2. params是在跳转路由时,处理导航的文字颜色,因为只有匹配成功的导航才会有router-link-active类名
3. query就是我们在跳转路由是,需要向组件中传递的所有数据

3.2 编程路由跳转