vue如何跳轉(zhuǎn)到其他頁面
一、無參跳轉(zhuǎn)
跳轉(zhuǎn)到指定URL，向history棧添加一個(gè)新的紀(jì)錄，點(diǎn)擊后退會(huì)返回至上一個(gè)頁面。
// 聲明式
<router-link :to = "…">
// 編程式，參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對象
<router.push('/user/index')>
// 直接寫路由地址
this.$router.push('/user/index')
// 地址對象
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è)全局的路由器對象，包含了很多屬性和對象（比如 history 對象），任何頁面都可以調(diào)用其 push, replace, go 等方法。
this.$route 表示當(dāng)前路由對象，每一個(gè)路由都會(huì)有一個(gè) route 對象，是一個(gè)局部的對象，可以獲取對應(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)容請搜索腳本之家以前的文章或繼續(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)三級頁面跳轉(zhuǎn)功能
- vue3頁面跳轉(zhuǎn)的兩種方式
- vue3 setup點(diǎn)擊跳轉(zhuǎn)頁面的實(shí)現(xiàn)示例
相關(guān)文章
Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)與路由詳解
在vue中進(jìn)行前端網(wǎng)頁開發(fā)時(shí),通常列表數(shù)據(jù)用el-table展示,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)與路由的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue發(fā)送驗(yàn)證碼計(jì)時(shí)器防止刷新實(shí)現(xiàn)詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
對Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解
今天小編就為大家分享一篇對Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關(guān)于vue自適應(yīng)布局(各種瀏覽器,分辨率)的示例代碼
這篇文章主要介紹了vue自適應(yīng)布局（各種瀏覽器，分辨率）,主要使用了flex布局的flex:1屬性和自適應(yīng)的css+vh+百分比這種方式，開局設(shè)置overflow:hidden，主體main部分要設(shè)置：overflow:auto，需要的朋友可以參考下2022-09-09
vue中element 上傳功能的實(shí)現(xiàn)思路
這篇文章主要介紹了vue中element 的上傳功能的實(shí)現(xiàn)思路,本文大概通過兩種實(shí)現(xiàn)思路，具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧2018-07-07
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
本文通過實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)評論列表功能，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-10
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯(cuò)亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時(shí)辨識(shí) VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧2023-11-11
uni-app是一款基于Vue.js的跨平臺(tái)開發(fā)框架，它借助了 Vue.js 的語法和組件化開發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下2023-06-06
vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06