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

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

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

1、路由的兩種常見(jiàn)方式

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)填寫(xiě)上面的path）
	this.$router.push('/login')
	
	// 對(duì)象
	this.$router.push({path: '/login'});
	
	// 通過(guò)路由的 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:"頁(yè)面跳轉(zhuǎn)成功"}})

新頁(yè)面/路由中獲取參數(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:"頁(yè)面跳轉(zhuǎn)成功"}})

新頁(yè)面/路由中獲取參數(shù)

console.log(this.$route.params.message);

注意：this.$router.push() 方法中path不能和params一起使用，否則params將無(wú)效。需要用name來(lái)指定頁(yè)面及通過(guò)路由配置的name屬性訪問(wèn)

兩種方式的區(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue實(shí)現(xiàn)百分比占比條效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)百分比占比條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue實(shí)現(xiàn)牌面翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)牌面翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
手把手教你vue實(shí)現(xiàn)動(dòng)態(tài)路由
動(dòng)態(tài)路由可以根據(jù)不同用戶(hù)登錄獲取不一樣的路由層級(jí),可隨時(shí)調(diào)配路由,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能
這篇文章主要介紹了基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下
2017-05-05
vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
Avue實(shí)現(xiàn)動(dòng)態(tài)查詢(xún)與數(shù)據(jù)展示的示例代碼
Avue是一個(gè)基于Vue.js的前端框架,它是由阿里云開(kāi)發(fā)的一款企業(yè)級(jí)UI組件庫(kù),旨在提供一套全面、易用且高性能的界面解決方案本文介紹了Avue實(shí)現(xiàn)動(dòng)態(tài)查詢(xún)與數(shù)據(jù)展示的示例,需要的朋友可以參考下
2024-08-08
Vue3.0靜態(tài)文件存放路徑與引用方式
這篇文章主要介紹了Vue3.0靜態(tài)文件存放路徑與引用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
$vue依賴(lài)包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421$
vue依賴(lài)包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴(lài)包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08