vue如何跳轉(zhuǎn)到其他頁面
一、無參跳轉(zhuǎn)
跳轉(zhuǎn)到指定URL，向history棧添加一個(gè)新的紀(jì)錄，點(diǎn)擊后退會(huì)返回至上一個(gè)頁面。
// 聲明式
<router-link :to = "…">
// 編程式，參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象
<router.push('/user/index')>
// 直接寫路由地址
this.$router.push('/user/index')
// 地址對(duì)象
this.$router.push({path:'/user/index'})二、帶參跳轉(zhuǎn)
1、query傳參
this.$router.push({ path: '/user/index', query: { account: account }})query傳遞的參數(shù)顯示在地址欄中，刷新后依然存在，類似
http://localhost/user/index?account=123
參數(shù)接收方式
watch: {
$route: {
handler: function(route) {
const account = route.query && route.query.account;
console.info(account)
},
immediate: true
}
}或者放到created里面
created() {
const {params, query} = this.$route;
console.info(account)
}或者放到mounted里面
mounted(){
const account = this.$route.query && this.$route.query.account;
console.info(account)
}以上幾種寫法都是可以的。特別注意參數(shù)接收是使用$route，而非$router.
this.$router 相當(dāng)于一個(gè)全局的路由器對(duì)象，包含了很多屬性和對(duì)象（比如 history 對(duì)象），任何頁面都可以調(diào)用其 push, replace, go 等方法。
this.$route 表示當(dāng)前路由對(duì)象，每一個(gè)路由都會(huì)有一個(gè) route 對(duì)象，是一個(gè)局部的對(duì)象，可以獲取對(duì)應(yīng)的 name, path, params, query 等屬性。
2、params傳參
this.$router.push({ name: 'User', params: { account: account }})參數(shù)接收方式與第一種類似，參數(shù)是 params
watch: {
$route: {
handler: function(route) {
const account = route.params && route.params.account;
console.info(account)
},
immediate: true
}
}這種方式不會(huì)在uri后面追加參數(shù)，params傳遞刷新會(huì)無效；
三、替換當(dāng)前頁
替換history棧中最后一個(gè)記錄
// 聲明式 <reouter-link :to="..." replace></router-link> // 編程式 this.$router.replace(...)
push方法也可以傳replace，默認(rèn)值：false
this.$router.push({path: '/homo', replace: true})四、向前或向后跳轉(zhuǎn)
this.$router.go(n)
與js原生的 window.history.go(n)用法相同, 向前或向后跳轉(zhuǎn) n 個(gè)頁面，n 為正時(shí)前往下一個(gè)頁面，為負(fù)時(shí)返回之前頁面。也就是從history棧中取前面還是后面的某個(gè)頁面。
this.$router.go(1) // 類似 history.forward() this.$router.go(-1) // 類似 history.back()
到此這篇關(guān)于vue如何跳轉(zhuǎn)到其他頁面的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)到其他頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面實(shí)現(xiàn)代碼
- vue跳轉(zhuǎn)頁面的幾種常用方法代碼示例
- vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
- Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
- vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂
- vue實(shí)現(xiàn)三級(jí)頁面跳轉(zhuǎn)功能
- vue3頁面跳轉(zhuǎn)的兩種方式
- vue3 setup點(diǎn)擊跳轉(zhuǎn)頁面的實(shí)現(xiàn)示例
相關(guān)文章
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
Vue3中的Refs全解析(附實(shí)戰(zhàn)案例)
Vue3的Refs是一種新的API,用于訪問DOM元素或組件實(shí)例,這篇文章主要介紹了Vue3中Refs的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)
在有些情況下需要使用不同的語言來完成一個(gè)項(xiàng)目,因此就有可能出現(xiàn)不同語言的程序之間的相互調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要給大家介紹了關(guān)于vue中data的代理和監(jiān)聽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
本篇文章主要介紹了vue頁面使用阿里oss上傳功能的實(shí)例（一），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本文介紹了Vue中使用Axios動(dòng)態(tài)加載員工列表數(shù)據(jù),并通過async/await替代then/catch優(yōu)化代碼結(jié)構(gòu),同時(shí)詳解了Vue生命周期的8個(gè)階段及鉤子函數(shù)應(yīng)用場景,強(qiáng)調(diào)mounted鉤子用于初始化數(shù)據(jù)請(qǐng)求,感興趣的朋友跟隨小編一起看看吧2025-07-07
vue-echarts高度縮小時(shí)autoresize失效的原因和解決辦法
Vue-Echarts是一個(gè)基于ECharts封裝的輕量級(jí)、易用的圖表組件庫,它允許你在Vue.js應(yīng)用中方便地集成ECharts,這是一個(gè)強(qiáng)大而直觀的數(shù)據(jù)可視化庫,本文給大家介紹了vue-echarts高度縮小時(shí)autoresize失效的原因和解決辦法,需要的朋友可以參考下2024-12-12
使用Vue+Django+Ant Design做一個(gè)留言評(píng)論模塊的示例代碼
這篇文章主要介紹了使用Vue+Django+Ant Design做一個(gè)留言評(píng)論模塊，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue項(xiàng)目打包部署的實(shí)戰(zhàn)過程記錄
我們使用nginx部署Vue項(xiàng)目,實(shí)質(zhì)上就是將Vue項(xiàng)目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包部署的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01