Vue中$router.push()路由切換及如何傳參和獲取參數(shù)

更新時間：2023年03月31日 09:41:34 作者：你知不知

這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下

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ù)可以是一個字符串路徑，或者一個描述地址的對象。

	// 假如現(xiàn)有的路由是（router.js中的登錄）
	import LoginPage from "@/views/Login.vue";
	const router = new VueRouter({
	  [{ path: "/login", name: "loginPage", component: LoginPage }]
	});
	
	// 字符串（對應填寫上面的path）
	this.$router.push('/login')
	
	// 對象
	this.$router.push({path: '/login'});
	
	// 通過路由的 name（對應的就是上面的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ù)會帶在url后邊展示在地址欄，
params傳參的參數(shù)不會展示到地址欄（刷新后參數(shù)失效）。

總結(jié)

到此這篇關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的文章就介紹到這了,更多相關(guān)Vue $router.push()路由切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解Vue3中對VDOM的改進
這篇文章主要介紹了詳解Vue3中對VDOM的改進，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
Vue中搭配Bootstrap實現(xiàn)Vue的列表增刪功能
日常開發(fā)中，我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁面布局，避免書寫大量的HTML和CSS代碼，省下了許多不必要的時間，可以直接搭配vue使用
2022-11-11
vue draggable resizable 實現(xiàn)可拖拽縮放的組件功能
這篇文章主要介紹了vue draggable resizable 實現(xiàn)可拖拽縮放的組件功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-07-07
vue基于Echarts的拖拽數(shù)據(jù)可視化功能實現(xiàn)
這篇文章主要給大家介紹了關(guān)于vue基于Echars的拖拽數(shù)據(jù)可視化功能實現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
vue的axios使用post時必須使用qs.stringify而get不用問題
這篇文章主要介紹了vue的axios使用post時必須使用qs.stringify而get不用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
uni-app在線預覽pdf文件的方法教程
這篇文章主要介紹了uni-app在線預覽pdf文件的相關(guān)資料,本文主要介紹了如何在Vue項目中使用PDF.js插件進行PDF文件的預覽,包括插件的下載、版本兼容問題的處理,以及在static文件夾下新建pdf文件夾存放解壓文件,需要的朋友可以參考下
2024-10-10
Vue中對watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽器，是Vue實例的一個屬性，是用來響應數(shù)據(jù)的變化，需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的，這篇文章主要介紹了Vue中對watch的理解,需要的朋友可以參考下
2022-11-11
Vue項目中使用Bootstrap
這篇文章介紹了Vue項目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03
vue+ts大文件切片上傳的實現(xiàn)示例
在Vue項目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價值，感興趣的可以了解一下
2024-01-01
vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)
這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-05-05