Vue路由配置項(xiàng)和參數(shù)使用及說明
更新時間：2025年10月22日 09:21:49 作者：yume_sibai
文章介紹了Vue路由中query和params參數(shù)的傳遞與接收、命名路由簡化跳轉(zhuǎn)、props配置參數(shù)、router-link的replace屬性、編程式導(dǎo)航、路由組件緩存及activated和deactivated兩個生命周期鉤子的用法
一、路由的query參數(shù)
1.傳遞參數(shù)
<!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的字符串寫法 -->
<!-- <router-link :to="`/home/message/Detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的對象寫法 -->
<router-link :to="{
path:'/home/message/Detail',
query:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>2.接收參數(shù)
$route.query.id
$route.query.title/* Message.vue */
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的字符串寫法 -->
<!-- <router-link :to="`/home/message/Detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，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.作用：可以簡化路由的跳轉(zhuǎn)，即簡化路徑。
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
}
]
}
]
},
]
})- 簡化跳轉(zhuǎn)
//簡化前
<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參數(shù)
1.配置路由，聲名接收params參數(shù)
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符聲明接收params參數(shù)
component:Detail
}
]
}
]
}2.傳遞參數(shù)
<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的字符串寫法 -->
<router-link :to="`/home/message/Detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的對象寫法 -->
<router-link :to="{
name:'detail',
params:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>特別注意：路由攜帶params參數(shù)時，若使用to的對象寫法，則不能使用path配置項(xiàng)，必須使用name配置！
3.接收參數(shù)
$route.params.id
$route.params.title四、路由的props配置
作用：讓路由組件更方便的收到參數(shù)
{
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參數(shù)通過props傳給Detail組件
props:true
//第三種寫法：props值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件
props($route){
return {id:$route.query.id,title:$route.query.title}
}
}
]
}五、<router-link>的replace屬性
1.作用：控制路由跳轉(zhuǎn)時操作瀏覽器歷史記錄的模式。
2.瀏覽器的歷史記錄有兩種寫入方式：分別是push和replace，push是追加歷史記錄，replace是替換當(dāng)前記錄。路由跳轉(zhuǎn)時，默認(rèn)為push。
3.如何開啟replace模式：
<router-link replace .............>News</router-link>
六、編程式路由導(dǎo)航
1.作用：不借助<router-link>實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活。
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() //前進(jìn)
this.$router.back() //后退
this.$router.go() //可前進(jìn)也可后退<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默認(rèn)包含的所有路由組件都緩存
<keep-alive include="News">
<router-view></router-view>
</keep-alive>八、兩個新的生命周期鉤子
1.作用：路由組件獨(dú)有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)。
2.具體名字
- activated：路由組建被激活時觸發(fā)
- deactivated路由組件失活時觸發(fā)
<template>
<ul>
<li :style="{opacity}">歡迎學(xué)習(xí)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>總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
如何使用Vue mapState快捷獲取Vuex state多個值
這篇文章主要為大家介紹了如何使用Vue mapState快捷獲取Vuex state多個值實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
路由是可以傳遞參數(shù)的，一般使用query進(jìn)行傳參，有兩種方式，本溫酒通過代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀2023-06-06
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了解析Vue2.0雙向綁定實(shí)現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
文章主要討論了在Vue項(xiàng)目中配置請求攔截器的`baseUrl`以及Vue Router的`base`屬性的一致性問題,無論是使用hash模式還是history模式,相對路徑都必須通過hash模式來確保正確性2025-11-11
最近項(xiàng)目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級聯(lián)動示例
本篇文章主要介紹了vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級聯(lián)動示例，非常具有實(shí)用價值，需要的朋友可以參考下2017-10-10
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2021-01-01
在現(xiàn)代 Web 開發(fā)中,前端路由管理是構(gòu)建單頁面應(yīng)用（SPA）的關(guān)鍵組成部分,隨著 Vue3 的發(fā)布,Vue Router 也得到了相應(yīng)的更新,在這篇博文中,我們將詳細(xì)探討 Vue3 中的路由管理,需要的朋友可以參考下2025-01-01