第三十六节:Vue路由:Vue-router路由传参
2022-06-22 本文已影响0人
曹老师
前沿:
vue-router的路由跳转时传递参数有两种方式,:
- 一种是路由参数, 通过定义动态路由传递参数
- 另一种是通过query来传递参数,
在者,我们已经学习过的,路由的跳转主要有两大类:
- 一类是
<router-link>组件的to跳转 - 第二类编程是导航,通过
js命令进行跳转
因此两种跳转方式, 组合两种传参方式, 就会组合出四种不同的写法
1. 动态路由传参
动态路由传参就是通过params进行传参:
动态路由传参说明:
- 动态路由params 参数的路由定义格式
/router/:id - 在跳转路由是
id的部分是动态变化的. 例如:/router/123, 传递的数据就是123
1.1 要实现下面的示例效果
示例展示:
image
示例分析:
- 这个示例是在上一节示例基础上进行的扩充
- 通过示例分析,是当我们点击不同的作者,要将作者的姓名传递到组件中
- 通过同一个组件来接触不同作者的信息,展示不同用户信息
1.2 通过<router-link>组件的to属性传参
1.2.1 实现效果代码
路由配置:
{
path:'/about',
component: About,
children:[
{
path:':username', // 动态路由配置
component: User
}
]
}
User组件获取params传参
<template>
<div id="user">
<!-- 通过$route.params.username -->
<h4>这里是关于<span>{{ $route.params.username }}</span>作者的信息</h4>
</div>
</template>
<script>
export default {
name:"User"
}
</script>
但是在跳转路由的时候就会有不一样的地方了
之前讲过,通过<router-link>组件跳转路由时,可以使用或不使用动态绑定to属性
1.2.2 router-link组件不使用动态绑定to属性
实现示例的About组件:
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<ul class="about-link">
<router-link tag="li" to="/about/张三">张三</router-link>
<router-link tag="li" to="/about/李四">李四</router-link>
<router-link tag="li" to="/about/王五">王五</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"About",
}
</script>
1.2.3 router-link使用动态绑定to属性
实现示例的About组件:
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<ul class="about-link">
<router-link tag="li" :to="{path:'/about/张三'}">张三</router-link>
<router-link tag="li" :to="{path:'/about/李四'}">李四</router-link>
<router-link tag="li" :to="{path:'/about/王五'}">王五</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"About",
}
</script>
1.2.4 通过命名路由跳转
我们在动态绑定to属性时,也可以通过命令路由的跳转方式
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<ul class="about-link">
<router-link tag="li" :to="{name:'user',params:{username:'张三'}}">
张三
</router-link>
<router-link tag="li" :to="{name:'user',params:{username:'李四'}}">
李四
</router-link>
<router-link tag="li" :to="{name:'user',params:{username:'王五'}}">
王五
</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"About",
}
</script>
1.3 通过编程路由导航传参
编程路由导航传参就是通过在方法中,通过js命令跳转路由并进行传参
1.3.1 普通的跳转传参
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<ul class="about-link">
<li @click="handleClick('张三')">张三</li>
<li @click="handleClick('李四')">李四</li>
<li @click="handleClick('王五')">王五</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"About",
methods:{
handleClick(username){
// 正常的编程路由跳转
this.$router.replace("/about/"+username)
}
}
}
</script>
1.3.2 通过命名路由跳转
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<ul class="about-link">
<li @click="handleClick('张三')">张三</li>
<li @click="handleClick('李四')">李四</li>
<li @click="handleClick('王五')">王五</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"About",
methods:{
handleClick(username){
// 编程导航中通过命名路由跳转
this.$router.replace({name:"user",params:{username:username}})
}
}
}
</script>
通过示例的展示,也了解到到了, params传递的参数其实是有限的, 通过来说就是一个字符串或者一组数字
如果希望以此多传递一点数据,就可以通过query方式进行传递
2. query方式传递参数
query方式传递数据说明
-
query方式传递数据,路由的配置就是普通路由配置
/router,如果有其他特殊情况另说 -
传递参数的方式 ,跳转路由时动态绑定的对象中使用
query的key作为传递方式
3.1 示例图
image
示例图分析:
- 在跳转路由的时候,不仅仅是将用户名传递过去
- 还连带的将用户的其他信息传递过去
3.2 标签跳转路由方式
此时要注意,如果使用在<router-link>组件进行路由跳转时传递query参数,
那么to属性只能通过动态绑定的方式传递
示例代码:
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<ul class="about-link">
<router-link
tag="li"
:to="{name:'user',params:{username:'张三'},query:{username:'张三',age:20,address:'长沙市'}}"
>
张三
</router-link>
<router-link
tag="li"
:to="{name:'user',params:{username:'李四'},query:{username:'李四',age:22,address:'北京市'}}"
>
李四
</router-link>
<router-link
tag="li"
:to="{name:'user',params:{username:'王五'},query:{username:'王五',age:26,address:'上海市'}}"
>
王五
</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"About",
}
</script>
代码分析
- 此时动态绑定的
to属性中,name是通过命名路由进行跳转 -
params是在跳转路由时,处理导航的文字颜色,因为只有匹配成功的导航才会有router-link-active类名 -
query就是我们在跳转路由是,需要向组件中传递的所有数据
3.2 编程路由跳转
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<ul class="about-link">
<li
@click="handleClick({username:'张三',age:20,address:'长沙市'})"
>张三</li>
<li
@click="handleClick({username:'李四',age:22,address:'北京市'})"
>李四</li>
<li
@click="handleClick({username:'王五',age:26,address:'上海市'})"
>王五</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"About",
methods:{
handleClick(user){
// 编程路由导航传递query数据
this.$router.replace({
path: "/about/"+user.username,
query:user
})
}
}
}
</script>
