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实现登陆跳转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
如何使用Vue mapState快捷获取Vuex state多个值
这篇文章主要为大家介绍了如何使用Vue mapState快捷获取Vuex state多个值实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
路由是可以传递参数的，一般使用query进行传参，有两种方式，本温酒通过代码示例给大家介绍这两种传递方式，感兴趣的小伙伴可以参考阅读2023-06-06
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它们都可以用于观察和响应数据的变化,但在使用场景和原理上存在明显的区别,本文将详细解析 Vue 3 中监听属性 (watch) 和计算属性 (computed) 的区别,需要的朋友可以参考下2024-02-02
本篇文章主要介绍了解析Vue2.0双向绑定实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
文章主要讨论了在Vue项目中配置请求拦截器的`baseUrl`以及Vue Router的`base`属性的一致性问题,无论是使用hash模式还是history模式,相对路径都必须通过hash模式来确保正确性2025-11-11
最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下2023-12-12
vue学习之mintui picker选择器实现省市二级联动示例
本篇文章主要介绍了vue学习之mintui picker选择器实现省市二级联动示例，非常具有实用价值，需要的朋友可以参考下2017-10-10
vue3 watch和watchEffect的使用以及有哪些区别
这篇文章主要介绍了vue3 watch和watchEffect的使用以及有哪些区别，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2021-01-01
在现代 Web 开发中,前端路由管理是构建单页面应用（SPA）的关键组成部分,随着 Vue3 的发布,Vue Router 也得到了相应的更新,在这篇博文中,我们将详细探讨 Vue3 中的路由管理,需要的朋友可以参考下2025-01-01
最新评论