快捷導(dǎo)航

vue如何跳轉(zhuǎn)到其他頁(yè)面

更新時(shí)間：2023年10月12日 10:14:14 作者：左邊的天堂

跳轉(zhuǎn)到指定URL,向history棧添加一個(gè)新的紀(jì)錄,點(diǎn)擊后退會(huì)返回至上一個(gè)頁(yè)面,這篇文章給大家介紹vue如何跳轉(zhuǎn)到其他頁(yè)面,包括無(wú)參跳轉(zhuǎn)和帶參跳轉(zhuǎn),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

一、無(wú)參跳轉(zhuǎn)

跳轉(zhuǎn)到指定URL，向history棧添加一個(gè)新的紀(jì)錄，點(diǎn)擊后退會(huì)返回至上一個(gè)頁(yè)面。

// 聲明式
<router-link :to = "…">
// 編程式，參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象
<router.push('/user/index')>
// 直接寫(xiě)路由地址
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ù)顯示在地址欄中，刷新后依然存在，類(lèi)似

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)
}

以上幾種寫(xiě)法都是可以的。特別注意參數(shù)接收是使用$route，而非$router.

this.$router 相當(dāng)于一個(gè)全局的路由器對(duì)象，包含了很多屬性和對(duì)象（比如 history 對(duì)象），任何頁(yè)面都可以調(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ù)接收方式與第一種類(lèi)似，參數(shù)是 params

watch: {
   $route: {
     handler: function(route) {
       const account = route.params && route.params.account;
   	   console.info(account)
     },
     immediate: true
   }
}

這種方式不會(huì)在uri后面追加參數(shù)，params傳遞刷新會(huì)無(wú)效；

三、替換當(dāng)前頁(yè)

替換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è)頁(yè)面，n 為正時(shí)前往下一個(gè)頁(yè)面，為負(fù)時(shí)返回之前頁(yè)面。也就是從history棧中取前面還是后面的某個(gè)頁(yè)面。

this.$router.go(1)  // 類(lèi)似 history.forward()
this.$router.go(-1) // 類(lèi)似 history.back()

到此這篇關(guān)于vue如何跳轉(zhuǎn)到其他頁(yè)面的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)到其他頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何跳轉(zhuǎn)到其他頁(yè)面

目錄

一、無(wú)參跳轉(zhuǎn)

二、帶參跳轉(zhuǎn)

1、query傳參

2、params傳參

三、替換當(dāng)前頁(yè)

四、向前或向后跳轉(zhuǎn)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何跳轉(zhuǎn)到其他頁(yè)面

目錄

一、無(wú)參跳轉(zhuǎn)

二、帶參跳轉(zhuǎn)

1、query傳參

2、params傳參

三、替換當(dāng)前頁(yè)

四、向前或向后跳轉(zhuǎn)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

二、帶參跳轉(zhuǎn)

1、query傳參

2、params傳參

三、替換當(dāng)前頁(yè)

四、向前或向后跳轉(zhuǎn)