vue 頁面跳轉(zhuǎn)的實現(xiàn)方式
更新時間：2021年01月12日 11:41:30 作者：青小記
這篇文章主要介紹了vue 頁面跳轉(zhuǎn)的實現(xiàn)方式，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
一、this.$router.push()
1、vue
<template>
<div id='test'>
<button @click='goTo()'>點擊跳轉(zhuǎn)4</button>
</div>
</template>
2、script
//跳轉(zhuǎn)前頁面?zhèn)鲄?shù)：
goTo(item) {
//storageData中數(shù)據(jù)用于跳轉(zhuǎn)到下一個頁面之后，進(jìn)行返回時能夠返回到跳轉(zhuǎn)之前的頁面
let storageData = {
searchWords: this.keyWord,
pageSize: this.paging.pageSize,
pageNo: this.paging.currentPage
};
//data中數(shù)據(jù)用于將本頁面中數(shù)據(jù)通過跳轉(zhuǎn)功能將其應(yīng)用到下一個頁面，與父子組件傳值同理
let data = {
type: item.srcType,
tableName: item.tableName,
name: item.datasourceName,
tableId: item.tableId,
id: item.datasourceId,
};
//將下一個頁面中將會用到的數(shù)據(jù)全部push到$router中
this.$router.push({
//name表示跳轉(zhuǎn)之后的資源前端訪問路徑，query用于存儲待使用數(shù)據(jù)，其中page是本頁面name,
name: 'onlineSearch',
query: {targetData: data ,storageData,
page:'search',
isBackSelect: true,
goBackName：'dataSearch'
}
})
}
3、跳轉(zhuǎn)后的頁面中獲取上個頁面的參數(shù)值
//跳轉(zhuǎn)后頁面獲取參數(shù):
mounted() {
//查看是否已經(jīng)參數(shù)是否傳至跳轉(zhuǎn)之后的頁面，若傳入，則根據(jù)需求進(jìn)行調(diào)用
console.log(this.$route.query.targetData;)
}
4、從跳轉(zhuǎn)后的頁面返回跳轉(zhuǎn)前頁面
//將返回函數(shù)寫到methods中
goBackSheet() {
if(this.$route.query.goBackName === 'dataSearch'){
this.$router.push({
name: this.pageName,
query: {
storageData: this.$route.query.storageData,
isBackSelect: true,
}
});
}
}
二、router-link跳轉(zhuǎn)
1、 通過 to 屬性指定目標(biāo)地址
query相當(dāng)于get請求，頁面跳轉(zhuǎn)的時候，可以在地址欄看到請求參數(shù)；
query 刷新 不會 丟失 query里面的數(shù)據(jù)；
query要用path來引入。
params相當(dāng)于post請求，參數(shù)不會再地址欄中顯示；
params 刷新 會 丟失 params里面的數(shù)據(jù)；
params要用name來引入。
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}" @click.native='goTo'>User</router-link>
<!-- 帶查詢參數(shù)，下面的結(jié)果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}" @click.native='goTo'>Register</router-link>
2、跳轉(zhuǎn)后頁面
watch:{
$route(to,from){
//刷新頁面
this.$router.go(1);
}
}
以上就是vue 頁面跳轉(zhuǎn)的實現(xiàn)方式的詳細(xì)內(nèi)容，更多關(guān)于vue 頁面跳轉(zhuǎn)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue打包程序部署到Nginx 點擊跳轉(zhuǎn)404問題
這篇文章主要介紹了Vue打包程序部署到Nginx 點擊跳轉(zhuǎn)404問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
vue使用echarts實現(xiàn)柱狀圖動態(tài)排序效果
echarts在前端開發(fā)中實屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實現(xiàn)柱狀圖動態(tài)排序效果,感興趣的可以了解下2023-10-10
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問題的解決過程,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實現(xiàn)嵌套表格,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
解決Element-ui radio單選框label布爾/數(shù)值的一個坑
這篇文章主要介紹了解決Element-ui radio單選框label布爾/數(shù)值的一個坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關(guān)于如何通過一個簡單的例子學(xué)會vuex與模塊化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
在Echarts圖中給坐標(biāo)軸加一個標(biāo)識線markLine
這篇文章主要介紹了在Echarts圖中給坐標(biāo)軸加一個標(biāo)識線markLine，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了VUE兄弟組件傳值操作,結(jié)合實例形式分析了VUE兄弟組件傳值操作的原理、步驟、實現(xiàn)方法及相關(guān)注意事項,需要的朋友可以參考下2019-10-10
組件是?vue.js?最強(qiáng)大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用，這篇文章主要介紹了Vue組件間傳值的實現(xiàn)2022-09-09
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02