Vue路由配置项和参数使用及说明
更新时间：2025年10月22日 09:21:49 作者：yume_sibai
文章介绍了Vue路由中query和params参数的传递与接收、命名路由简化跳转、props配置参数、router-link的replace属性、编程式导航、路由组件缓存及activated和deactivated两个生命周期钩子的用法
一、路由的query参数
1.传递参数
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/Detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/Detail',
query:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>2.接收参数
$route.query.id
$route.query.title/* Message.vue */
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/Detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/Detail',
query:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'信息001'},
{id:'002',title:'信息002'},
{id:'003',title:'信息003'}
]
}
},
}
</script>
<style>
</style>/* Detail.vue */
<template>
<ul>
<li>id:{{ $route.query.id }}</li>
<li>title:{{ $route.query.title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail'
}
</script>
<style>
</style>二、命名路由
1.作用：可以简化路由的跳转，即简化路径。
2.如何使用
- 给路由命名
........................
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'detail',
path:'detail',
component:Detail
}
]
}
]
},
]
})- 简化跳转
//简化前
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>
//简化后
<router-link :to="{
name:'detail',
query:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>三、路由的params参数
1.配置路由，声名接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}2.传递参数
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/Detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name:'detail',
params:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3.接收参数
$route.params.id
$route.params.title四、路由的props配置
作用：让路由组件更方便的收到参数
{
path:'message',
component:Message,
children:[
{
name:'detail',
path:'detail/:id/:title',
component:Detail,
// 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
props:{a:1,b:'hello'}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return {id:$route.query.id,title:$route.query.title}
}
}
]
}五、<router-link>的replace属性
1.作用：控制路由跳转时操作浏览器历史记录的模式。
2.浏览器的历史记录有两种写入方式：分别是push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时，默认为push。
3.如何开启replace模式：
<router-link replace .............>News</router-link>
六、编程式路由导航
1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活。
2.具体编码
//$router的两个API
this.$router.push({
name:'detail',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'detail',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<router-link :to="`/home/message/Detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'信息001'},
{id:'002',title:'信息002'},
{id:'003',title:'信息003'}
]
}
},
methods: {
pushShow(m){
this.$router.push({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
},
replaceShow(m){
this.$router.replace({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
},
},
}
</script>七、缓存路由组件
1.作用：让步展示的路由组件保持挂载，不被销毁。
2.具体编码：
//include默认包含的所有路由组件都缓存
<keep-alive include="News">
<router-view></router-view>
</keep-alive>八、两个新的生命周期钩子
1.作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态。
2.具体名字
- activated：路由组建被激活时触发
- deactivated路由组件失活时触发
<template>
<ul>
<li :style="{opacity}">欢迎学习Vue</li>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'News',
data() {
return {
opacity:1
}
},
activated(){
this.timer = setInterval(() => {
console.log('@')
if(this.opacity>=0)
this.opacity -=0.02
else
this.opacity = 1
}, 16);
},
deactivated() {
clearInterval(this.timer)
},
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue实现浏览器打印功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
演示代码使用 Vue3 + ts + Vite 编写，但是也会列出适用于 Vue2 的优化技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue学习-VueRouter路由基础,路由本质上就是超链接,xiamian 文章围绕VueRouter路由的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习有所帮助2021-12-12
本篇文章主要介绍了Vue-resource实现ajax请求和跨域请求示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了记录vue做微信自定义分享的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue2.x响应式及简单的示例，应用了简单的源代码进行讲解，感兴趣的小伙伴可以参考一下，希望可以帮助到你2021-08-08
这篇文章主要介绍了vue项目中使用pinyin转换插件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章给大家讲解了一下Vue精简版风格的相关知识点内容以及分享了实例代码，有兴趣的朋友参考下。2018-01-01
这篇文章主要介绍了VUE+jszip如何实现下载多个文件导出为一个zip格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下2023-11-11
最新评论