Vue路由配置項和參數(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配置項，必須使用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>實現(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue實現(xiàn)瀏覽器打印功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
演示代碼使用 Vue3 + ts + Vite 編寫，但是也會列出適用于 Vue2 的優(yōu)化技巧，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue學(xué)習(xí)-VueRouter路由基礎(chǔ)
這篇文章主要介紹了Vue學(xué)習(xí)-VueRouter路由基礎(chǔ),路由本質(zhì)上就是超鏈接,xiamian?文章圍繞VueRouter路由的相關(guān)資料展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
Vue-resource實現(xiàn)ajax請求和跨域請求示例
本篇文章主要介紹了Vue-resource實現(xiàn)ajax請求和跨域請求示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了記錄vue做微信自定義分享的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue2.x響應(yīng)式及簡單的示例，應(yīng)用了簡單的源代碼進(jìn)行講解，感興趣的小伙伴可以參考一下，希望可以幫助到你2021-08-08
這篇文章主要介紹了vue項目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章給大家講解了一下Vue精簡版風(fēng)格的相關(guān)知識點(diǎn)內(nèi)容以及分享了實例代碼，有興趣的朋友參考下。2018-01-01
VUE+jszip如何實現(xiàn)下載多個文件導(dǎo)出為一個zip格式
這篇文章主要介紹了VUE+jszip如何實現(xiàn)下載多個文件導(dǎo)出為一個zip格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關(guān)于vue項目中使用scss的詳細(xì)方法步驟,scss是一種css預(yù)處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,無需考慮瀏覽器的兼容性,讓css更加簡潔、適應(yīng)性更強(qiáng),可讀性更佳,需要的朋友可以參考下2023-11-11