快捷導(dǎo)航

關(guān)于vue-router路由的傳參方式params query

更新時(shí)間：2023年10月08日 08:49:14 作者：Morning_xx

這篇文章主要介紹了關(guān)于vue-router路由的傳參方式params query,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue-router路由的傳參方式params query

1.$router 和 $route的區(qū)別

$router : 路由操作對(duì)象、操作路由、包括路由的跳轉(zhuǎn)方法，鉤子函數(shù)等、只寫對(duì)象;
$route : 路由信息對(duì)象、獲取路由信息、包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)、只讀對(duì)象;

//操作 路由跳轉(zhuǎn)
this.$router.push({
    name:'hello',
    params:{
        name:'word',
        age:'11'
    }    
})
//讀取 路由參數(shù)接收
this.name = this.$route.params.name;
this.age = this.$route.param.age;

2.query傳參

path配合
刷新頁面參數(shù)不丟失

//query傳參，使用path跳轉(zhuǎn)
this.$router.push({
    path:'second',
    query:{
        queryId:'20230129',
        queryName:'Emma'
}
)}
//query傳參接受
this.quertId = ths.$route.query.queryId
this.queryName = this.$route.query.queryName

3.params傳參

和name配合
刷新頁面參數(shù)會(huì)丟失

//params傳參，使用name
this.$router.push({
    name:'second',
    params:{
        Id:'20230129',
        Name:'Emma'
}
)}
//query傳參接受
this.Id = ths.$route.params.Id
this.Name = this.$route.params.Name 
//路由
{
path:'/second/:id/:name',
name:'second',
component:() => import('@/view/second')
}

vue-router路由傳參，如果沒參數(shù)的話就跳轉(zhuǎn)回來

if (JSON.stringify(this.$route.params) == '{}') {
? ? this.$router.go(-1)
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vite?Vue3?EsLint?Prettier配置步驟極簡(jiǎn)方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡(jiǎn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
解決vue-router在同一個(gè)路由下切換,取不到變化的路由參數(shù)問題
今天小編就為大家分享一篇解決vue-router在同一個(gè)路由下切換,取不到變化的路由參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue項(xiàng)目中vue.config.js常用配置項(xiàng)詳解
在 Vue CLI 創(chuàng)建的項(xiàng)目中,vue.config.js 是核心配置文件,用于定制化構(gòu)建、開發(fā)和部署流程,本文詳細(xì)解析了該文件的常用配置項(xiàng),并結(jié)合代碼示例和表格說明,幫助開發(fā)者高效管理項(xiàng)目配置,提升開發(fā)體驗(yàn),需要的朋友可以參考下
2025-04-04
Vue子組件向父組件通信與父組件調(diào)用子組件中的方法
這篇文章主要介紹了Vue子組件向父組件通信與父組件調(diào)用子組件中的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
VUE django 跨域、csrf令牌的問題
在Vue和Django進(jìn)行前后分離開發(fā)時(shí),經(jīng)常會(huì)遇到跨域和CSRF令牌驗(yàn)證問題,本文詳細(xì)介紹了如何在Django后端設(shè)置視圖獲取CSRF令牌,并在Vue前端進(jìn)行配置以確保安全的數(shù)據(jù)交互,文章提供了后端視圖創(chuàng)建、settings配置以及前端axios請(qǐng)求封裝的具體方法
2024-09-09
vue @vuelidate父子組件綁定注意事項(xiàng)
Vue@vuelidate父子組件驗(yàn)證時(shí),不能直接綁定,需在子組件驗(yàn)證方法內(nèi)部進(jìn)行綁定,以避免父組件驗(yàn)證時(shí)包含子組件的驗(yàn)證
2025-02-02
vue多級(jí)多選菜單組件開發(fā)
這篇文章主要為大家分享了vue多級(jí)多選菜單組件開發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
vue實(shí)現(xiàn)底部菜單功能
本文通過實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)底部菜單功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
vue項(xiàng)目的訪問端口及其設(shè)置方式
這篇文章主要介紹了vue項(xiàng)目的訪問端口及其設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2022-10-10
el-popover如何通過js手動(dòng)控制彈出框顯示、隱藏
最近項(xiàng)目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動(dòng)控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下
2023-12-12