vue如何跳轉到其他頁面
更新時間：2023年10月12日 10:14:14 作者：左邊的天堂
跳轉到指定URL,向history棧添加一個新的紀錄,點擊后退會返回至上一個頁面,這篇文章給大家介紹vue如何跳轉到其他頁面,包括無參跳轉和帶參跳轉,本文結合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
一、無參跳轉
跳轉到指定URL，向history棧添加一個新的紀錄，點擊后退會返回至上一個頁面。
// 聲明式
<router-link :to = "…">
// 編程式，參數(shù)可以是一個字符串路徑，或者一個描述地址的對象
<router.push('/user/index')>
// 直接寫路由地址
this.$router.push('/user/index')
// 地址對象
this.$router.push({path:'/user/index'})二、帶參跳轉
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 對象，是一個局部的對象，可以獲取對應的 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})四、向前或向后跳轉
this.$router.go(n)
與js原生的 window.history.go(n)用法相同, 向前或向后跳轉 n 個頁面，n 為正時前往下一個頁面，為負時返回之前頁面。也就是從history棧中取前面還是后面的某個頁面。
this.$router.go(1) // 類似 history.forward() this.$router.go(-1) // 類似 history.back()
到此這篇關于vue如何跳轉到其他頁面的文章就介紹到這了,更多相關vue跳轉到其他頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進行封裝實現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時機，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
Vue3的Refs是一種新的API,用于訪問DOM元素或組件實例,這篇文章主要介紹了Vue3中Refs的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-06-06
vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)
在有些情況下需要使用不同的語言來完成一個項目,因此就有可能出現(xiàn)不同語言的程序之間的相互調(diào)用,下面這篇文章主要給大家介紹了關于vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)的相關資料,需要的朋友可以參考下2024-03-03
這篇文章主要給大家介紹了關于vue中data的代理和監(jiān)聽的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
本篇文章主要介紹了vue頁面使用阿里oss上傳功能的實例（一），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文介紹了Vue中使用Axios動態(tài)加載員工列表數(shù)據(jù),并通過async/await替代then/catch優(yōu)化代碼結構,同時詳解了Vue生命周期的8個階段及鉤子函數(shù)應用場景,強調(diào)mounted鉤子用于初始化數(shù)據(jù)請求,感興趣的朋友跟隨小編一起看看吧2025-07-07
vue-echarts高度縮小時autoresize失效的原因和解決辦法
Vue-Echarts是一個基于ECharts封裝的輕量級、易用的圖表組件庫,它允許你在Vue.js應用中方便地集成ECharts,這是一個強大而直觀的數(shù)據(jù)可視化庫,本文給大家介紹了vue-echarts高度縮小時autoresize失效的原因和解決辦法,需要的朋友可以參考下2024-12-12
使用Vue+Django+Ant Design做一個留言評論模塊的示例代碼
這篇文章主要介紹了使用Vue+Django+Ant Design做一個留言評論模塊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
我們使用nginx部署Vue項目,實質(zhì)上就是將Vue項目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關于Vue項目打包部署的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)左右點擊滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01