vue如何跳轉(zhuǎn)到其他頁面
一、無參跳轉(zhuǎn)
跳轉(zhuǎn)到指定URL,向history棧添加一個新的紀錄,點擊后退會返回至上一個頁面。
// 聲明式 <router-link :to = "…"> // 編程式,參數(shù)可以是一個字符串路徑,或者一個描述地址的對象 <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 相當于一個全局的路由器對象,包含了很多屬性和對象(比如 history 對象),任何頁面都可以調(diào)用其 push, replace, go 等方法。
this.$route 表示當前路由對象,每一個路由都會有一個 route 對象,是一個局部的對象,可以獲取對應(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 } }
這種方式不會在uri后面追加參數(shù),params傳遞刷新會無效;
三、替換當前頁
替換history棧中最后一個記錄
// 聲明式 <reouter-link :to="..." replace></router-link> // 編程式 this.$router.replace(...)
push方法也可以傳replace,默認值:false
this.$router.push({path: '/homo', replace: true})
四、向前或向后跳轉(zhuǎn)
this.$router.go(n)
與js原生的 window.history.go(n)
用法相同, 向前或向后跳轉(zhuǎn) n 個頁面,n 為正時前往下一個頁面,為負時返回之前頁面。也就是從history棧中取前面還是后面的某個頁面。
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+ElementUi實現(xiàn)點擊表格中鏈接進行頁面跳轉(zhuǎn)與路由詳解
在vue中進行前端網(wǎng)頁開發(fā)時,通常列表數(shù)據(jù)用el-table展示,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUi實現(xiàn)點擊表格中鏈接進行頁面跳轉(zhuǎn)與路由的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02對Vue beforeRouteEnter 的next執(zhí)行時機詳解
今天小編就為大家分享一篇對Vue beforeRouteEnter 的next執(zhí)行時機詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧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-09vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06