vuejs路由的傳參及路由props配置詳解
前言
在Vue項目里,去實現(xiàn)左側(cè)菜單邊欄多級內(nèi)容的展示,導(dǎo)航的切換,以及內(nèi)容鏈接的跳轉(zhuǎn)等,用的都是前端路由vue-router,它的重要性,不可言喻
下面介紹一下Vue中的路由傳參以及路由的prps配置
方式1-使用query方式
這里循環(huán)遍歷一個列表為例,query的方式,跳轉(zhuǎn)的url后面攜帶的一些具體的參數(shù),比如下面的攜帶id,和name
to字符串的寫法
<router-link :to="`/new/detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>to對象的寫法
<router-link :to="
{
path: '/new/detail',
query:{
id: item.id,
name: item.name
}
}">{{item.name}}
</router-link>以上對象的寫法,相比于字符串的寫法,雖然麻煩了一點,但是比較清晰,當(dāng)傳入的參數(shù)比較多時,比較適合,而且也易維護(hù)
如下是完整的組件代碼,定義了一個NewCom.vue的組件
<template>
<div>
<ul>
<li v-for="item in lists" :key="item.id">
<router-link :to="`/new/detail/?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>
</li>
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {
name: 'NewCom',
data() {
return {
lists: [
{
id: "1",
name: 'IT資源網(wǎng)',
url: 'https://itclan.cn'
},
{
id: '2',
name: 'itclanCoder',
url: 'https://coder.itclan.cn'
},
{
id: '3',
name: '客來影視TV',
url: 'https://video.itclan.cn'
},
{
id: '4',
name: '發(fā)卡商城',
url: 'https://faka.itclan.cn'
},
{
id: '5',
name: '愛客來科技',
url: 'https://aikelaidev.cn'
}
]
}
}
}
</script>
<style lang="scss" scoped>
ul,li {
list-style: none;
}
</style>那組件的另一邊如何去接收傳遞過去的參數(shù)呢,通過this.$route.query的方式進(jìn)行接收
<p>{{this.$route.query.id}} {{this.$route.query.name}}</p>命名路由
在路由跳轉(zhuǎn)時,to后面跟著路徑這種寫法是沒什么問題的,但會發(fā)現(xiàn),也很麻煩,有時,通過一個名稱來標(biāo)識一個路由,就會顯得更方便一些的,特別是在鏈接一個路由,或是執(zhí)行一些跳轉(zhuǎn)的時候,你可以在創(chuàng)建Router實例的時候
在routes配置中某個路由設(shè)置名稱,如下代碼所示
import VueRouter from "vue-router"
import New from "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";
// 創(chuàng)建router示例對象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名稱
path: 'detail',
component: Detail
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;那么另一邊路由跳轉(zhuǎn)時,直接使用name就可以了,不用寫具體的路徑path了的,如下所示
<router-link :to="
{
name: 'detailPage', // 此處使用name就可以了的,其他的不變
query: {
id: item.id,
name: item.name
}
}">{{item.name}}</router-link>命名路由,其實就是可以簡化路由的跳轉(zhuǎn)
<!--簡化前,需要填寫完整的路徑-->
<router-link to="/new/detail"></router-link>
<!-- 簡化后,直接通過名字跳轉(zhuǎn) -->
<router-link :to="{name:'detailPage'}"></router-link>
<!--簡化寫法配合query傳遞參數(shù)-->
<router-link :to="{
name: 'detailPage',
query: {
id: '111',
name: 'itclan.cn'
}
}">
</router-link>推薦使用命名路由,在調(diào)試和尋找組件的時候,可以根據(jù)路由的名字,排查問題
方式2-路由的params參數(shù)
這個路由的params參數(shù),簡單一點來說就是路徑的的參數(shù),并不是像query一樣那么直觀,而是如下所示,路徑最后面的/1/IT資源網(wǎng)是params參數(shù),它是動態(tài)的
http://localhost:8080/#/new/detail/1/IT資源網(wǎng)
在官方文檔里,這種被北城動態(tài)路由的匹配,就是把某種模式匹配到的所有路由,全都映射到同一個組件上,比如這個detail組件
對于所有id各不同的詳情頁,都要使用這個組件來渲染,那么在定義路由規(guī)則,配置時,就可以使用動態(tài)路徑參數(shù)；來實現(xiàn),如下所示
import VueRouter from "vue-router"
import New from "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";
// 創(chuàng)建router示例對象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名稱
// path: 'detail', // 非動態(tài)路由設(shè)置
// 動態(tài)路徑參數(shù)，以冒號開頭:參數(shù)名
path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
component: Detail
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;那在組件中如何傳遞參數(shù)呢,如下所示
<router-link :to="`/new/detail/${item.id}/${item.name}`">{{item.name}}</router-link>或如下對象的寫法
<router-link :to="
{
name: 'detailPage',
params: {
id: item.id,
name: item.name
}
}
">{{item.name}}</router-link>兩種寫法:歸納一下
<!--跳轉(zhuǎn)并攜帶params參數(shù),to的字符串寫法-->
<router-link :to="/new/detail/1/IT資源網(wǎng)">新聞</router-link>
<router-link :to="{name: 'detailPage',params: {id:1,name:'IT資源網(wǎng)'}}">特別注意: 路由攜帶params參數(shù)時,若使用to的對象寫法,則不能使用path配置項,必須使用name配置
另一邊組件如何接收的？**通過this.$route.params**可以進(jìn)行接收
query與params的區(qū)別
params傳參,必須使用命名路由方式傳參
<router-link :to="
{
path: '/new/detail', // 如果是params,動態(tài)路由方式,這種方式是不生效的
params: {
id: item.id,
name: item.name
}
}
">{{item.name}}</router-link>params傳參,不會顯示在地止欄上,會保存在內(nèi)存中,刷新會丟失，可以配合本地存儲localStorage進(jìn)行使用query的參數(shù)會顯示在地止欄上,不會丟失
路由的props配置
讓路由組件更方便的收到參數(shù)
我們知道在Vue中子組件接收父組件傳遞過來的數(shù)據(jù),是用props進(jìn)行接收,那么同樣路由組件也是可以這么操作的
在接收傳遞過來的參數(shù)的組件,使用$route會與路由緊密耦合,但是不是很靈活,會寫一堆的this.$route.params或this.$route.query這樣的代碼去讀取傳遞過來的參數(shù)
路由配置的布爾模式
當(dāng) props 設(shè)置為 true 時，route.params 將被設(shè)置為組件的 props 它是在對應(yīng)的路由組件配置,設(shè)置props:true,如下所示
// 省略
// 創(chuàng)建router示例對象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名稱
// path: 'detail', // 非動態(tài)路由設(shè)置
path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
component: Detail,
props: true // 此處設(shè)置props: true
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;那么在接收使用參數(shù)的組件,通過props: ['參數(shù)1','參數(shù)2']
<template>
<div>
<!-- 直接在模板中可以使用 -->
<p>{{id}} {{name}}</p>
</div>
</template>
<script>
export default {
name: 'DetailCom',
props: ['id','name'], // 通過props進(jìn)行接收
mounted() {
console.log(this.$route);
}
}
</script>路由配置的對象模式
我們有時候,不僅僅是需要傳入動態(tài)的參數(shù),也需要傳入靜態(tài)的參數(shù)(寫死的參數(shù))傳給路由組件,那么這個時候,props對象模式就會很有用,如下所示
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名稱
path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
component: Detail,
props: { // 對象形式,靜態(tài)參數(shù)
url: 'https://itclan.cn'
}
}
]
},
]
})在路由組件接收使用參數(shù),依舊使用props:['url']進(jìn)行接收
注意的是:當(dāng)props為對象時,那么動態(tài)的參數(shù),就失效了,只有靜態(tài)參數(shù)才有用
所以接下來介紹的路由函數(shù)模式,就可以兼顧動態(tài)的路由參數(shù)與靜態(tài)參數(shù)的結(jié)合
路由配置函數(shù)模式
props值為函數(shù),該函數(shù)返回的對象中每一組key-vaue都會通過props傳給路由組件
這種方式很好的解決了路由組件傳參中對象模式的弊端,可以兼顧靜態(tài)參數(shù)與動態(tài)參數(shù)
如下所示
// 創(chuàng)建router示例對象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名稱
path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
component: Detail,
props(route) { // props值為函數(shù)形式,接收一個參數(shù)route,并且返回一個對象
return {
id: route.params.id,
name: route.params.name,
url: 'https://itclan.cn'
}
}
// 等價如下兩種寫法
// 可以對參數(shù)進(jìn)行解構(gòu)
/*
props({params}) {
return {
id: params.id,
name: params.name,
url: 'https://itclan.cn'
}
}*/
// 對象的解構(gòu)以及連續(xù)賦值,語義化不明確,不推薦
props({params: {id,name}}) {
return {
id,
name,
url: 'https://itclan.cn'
}
}
}
]
},
]
})
export default router;讓路由組件接收參數(shù)時,能夠更加的靈活,不需要寫很多重復(fù)this.$route.query或this.$route.params這樣的代碼,這樣的寫法是最強(qiáng)大的
總結(jié)
關(guān)于Vue中的路由傳參以及props的配置就介紹到這里,其中傳參有兩種方式,一種是query,另一種就是params,前者通過url后面跟著參數(shù)
,而通過this.$route.query進(jìn)行接收參數(shù),后者,是在路由規(guī)則配置中的path路徑中,以冒號:形式動態(tài)路由參數(shù)的配置,通過this.$route.params方式進(jìn)行接收參數(shù)
兩種方式各有特點
光看官方文檔是理解不了的,這個必須得自己動手寫代碼測試,才能知道這兩種方式的區(qū)別,路由的傳參是一個非常重要的知識點
而路由組件的props配置則是更好的接收參數(shù),讓接收參數(shù)更加的靈活
到此這篇關(guān)于vuejs路由的傳參及路由props配置的文章就介紹到這了,更多相關(guān)vuejs路由傳參及props配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
daisyUI解決TailwindCSS堆砌class問題詳解
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue使用electron轉(zhuǎn)換項目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
本文主要介紹了vue3在項目中的邏輯抽離和字段顯示，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue實現(xiàn)省市區(qū)三級聯(lián)動el-select組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)省市區(qū)三級聯(lián)動el-select組件的方法，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的的可以參考一下2023-02-02
Vue動態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會平均分配給剩余的列,需要的朋友可以參考下2023-07-07
Vue自定義指令學(xué)習(xí)及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue中自定義指令的學(xué)習(xí)以及如何利用Vue制作一個簡單的學(xué)生信息管理系統(tǒng)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
這篇文章主要介紹了vue中eslint導(dǎo)致的報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
監(jiān)聽器是Vue3中非常好用的一個特性,用于監(jiān)聽某個響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實踐,具有一定的參考價值,感興趣的可以了解一下2023-12-12
Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue2.0 實現(xiàn)歌手列表滾動及右側(cè)快速入口功能
這篇文章主要介紹了Vue2.0實現(xiàn)歌手列表滾動及右側(cè)快速入口功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08