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

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

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

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

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

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

//操作 路由跳轉(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ù)會丟失

//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é)

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

您可能感興趣的文章:

相關(guān)文章

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