Vue中$router.push()路由切換、傳參和獲取參數的方法是什么

這篇文章主要介紹“Vue中$router.push()路由切換、傳參和獲取參數的方法是什么”，在日常操作中，相信很多人在Vue中$router.push()路由切換、傳參和獲取參數的方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue中$router.push()路由切換、傳參和獲取參數的方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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(...)

該方法的參數可以是一個字符串路徑，或者一個描述地址的對象。

	// 假如現有的路由是（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、傳參和獲取參數（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:"頁面跳轉成功"}})

新頁面/路由中 獲取參數

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:"頁面跳轉成功"}})

新頁面/路由中 獲取參數

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

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

兩種方式的區別是：

• query傳參的參數會帶在url后邊展示在地址欄，

• params傳參的參數不會展示到地址欄（刷新后參數失效）。

到此，關于“Vue中$router.push()路由切換、傳參和獲取參數的方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！