Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
更新時(shí)間：2023年03月31日 09:41:34 作者：你知不知
這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
1、路由的兩種常見方式
1）聲明式：
<router-link to="/login">
<router-link :to="{ path: '/login' }">Home</router-link>
<router-link :to="{ name: 'loginPage'}">User</router-link>
2）編程式：$router.push(...)該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。
// 假如現(xiàn)有的路由是（router.js中的登錄）
import LoginPage from "@/views/Login.vue";
const router = new VueRouter({
[{ path: "/login", name: "loginPage", component: LoginPage }]
});
// 字符串（對(duì)應(yīng)填寫上面的path）
this.$router.push('/login')
// 對(duì)象
this.$router.push({path: '/login'});
// 通過路由的 name（對(duì)應(yīng)的就是上面的name）
this.$router.push({ name: 'loginPage' })
2、傳參和獲取參數(shù)（query和params）
1）query方式
this.$router.push({<!--{C}%3C!%2D%2D%20%2D%2D%3E-->path:"/login",query:{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->message:"頁面跳轉(zhuǎn)成功"}})新頁面/路由中 獲取參數(shù)
console.log(this.$route.query.message);
2）params方式
this.$router.push({<!--{C}%3C!%2D%2D%20%2D%2D%3E-->name:"loginPage",params:{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->message:"頁面跳轉(zhuǎn)成功"}})新頁面/路由中 獲取參數(shù)
console.log(this.$route.params.message);
注意：
this.$router.push()方法中path不能和params一起使用，否則params將無效。需要用name來指定頁面及通過路由配置的name屬性訪問
兩種方式的區(qū)別是：
- query傳參的參數(shù)會(huì)帶在url后邊展示在地址欄，
- params傳參的參數(shù)不會(huì)展示到地址欄（刷新后參數(shù)失效）。
總結(jié)
到此這篇關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的文章就介紹到這了,更多相關(guān)Vue $router.push()路由切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)
- vue-router路由傳參及隱藏參數(shù)問題
- vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
- Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- 如何處理vue router 路由傳參刷新頁面參數(shù)丟失
- vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問題
- vue-router路由參數(shù)刷新消失的問題解決方法
- 詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù)
- Vue Router中獲取路由傳遞過來的參數(shù)(方法詳解)
相關(guān)文章
這篇文章主要介紹了詳解Vue3中對(duì)VDOM的改進(jìn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開發(fā)中，我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁面布局，避免書寫大量的HTML和CSS代碼，省下了許多不必要的時(shí)間，可以直接搭配vue使用2022-11-11
vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能
這篇文章主要介紹了vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue基于Echarts的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于vue基于Echars的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue的axios使用post時(shí)必須使用qs.stringify而get不用問題
這篇文章主要介紹了vue的axios使用post時(shí)必須使用qs.stringify而get不用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了uni-app在線預(yù)覽pdf文件的相關(guān)資料,本文主要介紹了如何在Vue項(xiàng)目中使用PDF.js插件進(jìn)行PDF文件的預(yù)覽,包括插件的下載、版本兼容問題的處理,以及在static文件夾下新建pdf文件夾存放解壓文件,需要的朋友可以參考下2024-10-10
Vue中對(duì)watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽器，是Vue實(shí)例的一個(gè)屬性，是用來響應(yīng)數(shù)據(jù)的變化，需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的，這篇文章主要介紹了Vue中對(duì)watch的理解,需要的朋友可以參考下2022-11-11
這篇文章介紹了Vue項(xiàng)目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
在Vue項(xiàng)目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個(gè)非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價(jià)值，感興趣的可以了解一下2024-01-01
vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)
這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05