vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作
最近開發(fā)vue項目，遇到的一些問題，這里整合一下，看到一些博客已經(jīng)有寫相關(guān)知識，然后自己再次記錄一下。
這是關(guān)于vue路由相關(guān)比較常見的問題，以后遇到相關(guān)路由的問題，會不斷更新這篇博客。
需求1：從填寫表單A頁面跳轉(zhuǎn)到B頁面，然后再從B頁面返回到A頁面，實現(xiàn)A頁面的所填的數(shù)據(jù)保留
一.設(shè)置路由緩存：
1.App.vue中加入<keep-alive> 具體代碼如下：
<template> <div id="app"> <!--<img src="./assets/logo.png">--> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 這里是會被緩存的視圖組件A --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 這里是不被緩存的視圖組件B --> </router-view> </div> </template>
2.在路由配置文件index.js里面增加meta標(biāo)簽，代碼如下：
export default new Router({
routes: [
{
path: '/',
name: 'Initinfo',
component: Initinfo
},
{
path: '/B',
name:'B',
component: CredentialsDetails,
meta:{keepAlive:false}
},
{
path: '/A',
name:'A',
component: ASeal,
meta:{keepAlive:true}
}
]
})
ok，做到這里，就能實現(xiàn)以上需求1。
需求2：在需求1基礎(chǔ)上，增加一個需求就是，緩存A表單頁面滾動位置，代碼如下：
export default new Router({
//使用keep-alive后，可能存在滾動條問題的解決問題
mode:'hash',//默認(rèn)是hash模式 且有history
scrollBehavior(to,from,savePosition) { // 在點擊瀏覽器的“前進(jìn)/后退”，或者切換導(dǎo)航的時候觸發(fā)。
console.log(to) // to：要進(jìn)入的目標(biāo)路由對象，到哪里去
console.log(from) // from：離開的路由對象，哪里來
console.log(savePosition) // savePosition：會記錄滾動條的坐標(biāo)，點擊前進(jìn)/后退的時候記錄值{x:?,y:?}
if(savePosition){
return savePosition;
}else{
return {
x: 0,
y: 0
}
}
},
routes: [
{
path: '/',
name: 'Initinfo',
component: Initinfo
},
{
path: '/B',
name:'B',
component: CredentialsDetails,
meta:{keepAlive:false}
},
{
path: '/A',
name:'A',
component: ASeal,
meta:{keepAlive:true}
}
]
})
需求3：
1.默認(rèn)顯示 A
2. B跳到 A，A 不刷新
3. C跳到 A，A 刷新
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
以上是路由守衛(wèi)官網(wǎng)，可以參考，下面介紹兩個守衛(wèi)：beforeRouteLeave,beforeRouteEnter
1.在路由的index.js文件，和以上路由一樣，設(shè)置A頁面的meta屬性，代碼如下：
{
path: '/A',
name:'A',
component: ASeal,
meta:{keepAlive:true}
}
2. 在B組件設(shè)置 beforeRouteLeave：代碼如下：
export default {
beforeRouteLeave(to, from, next) {
console.log(to);
console.log(from)
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = true; // 讓 A 緩存，即不刷新
next();//確保要調(diào)用 next 方法，否則鉤子就不會被 resolved
}
};
3.在C組件設(shè)置 beforeRouteLeave：代碼如下：
export default {
beforeRouteLeave(to, from, next) {
console.log(to);
console.log(from)
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = false; // 讓 A不緩存，即刷新
next();//確保要調(diào)用 next 方法，否則鉤子就不會被 resolved
}
};
ok，以上代碼即可滿足需求3
需求4：
1.A-->B-->C-->D 從A頁面依次進(jìn)入BCD頁面，現(xiàn)在我要在D頁面點擊返回（手機(jī)或者瀏覽器物理返回鍵）回到A頁面
2.A-->E-->D 從A頁面一次進(jìn)入ED頁面，現(xiàn)在我在D頁面點擊返回（手機(jī)或者瀏覽器物理返回鍵）回到E頁面
以上的需求總結(jié)來說就是，根據(jù)不同的渠道進(jìn)入D頁面的時候，當(dāng)點擊返回的時候，進(jìn)入不同的頁面
1.首先我在入口main.js里面聲明了一個全局變量（當(dāng)然你可以按照自己的方式去聲明一個變量）
global.beforeRouteName = "";
2.然后在D組件中，聲明路由守衛(wèi)：beforeRouteEnter,代碼如下：
剛進(jìn)入該組件時，便會進(jìn)入beforeRouteEnter,在此先賦值：
beforeRouteEnter(to,from,next){
global.beforeRouteName = from.name; //給全局變量賦值
next();
},
然后在mounted里面判斷瀏覽器是否支持popstate
mounted(){
//判斷瀏覽器是否支持popstate
if(window.history && window.history.pushState){
history.pushState(null,null,document.URL);
window.addEventListener('popstate',this.goBack,false);
}
}
其次在methods里面寫goBack方法，代碼如下：
goBack(){
if(global.beforeRouteName == "C"){ //判斷，當(dāng)獲取上個頁面進(jìn)來的路由是C的時候，返回到A頁面
this.$router.push({name:'A'});
}else if(global.beforeRouteName == "E"){ //判斷，當(dāng)獲取上個頁面進(jìn)來的路由是E的時候，返回上一頁
history.go(-1);
}else{
this.$router.push({name:'A'}); //判斷，當(dāng)有其他返回值的時候，默認(rèn)返回到A頁面（這個隨意設(shè)置，一般不會有這種情況）
}
}
最后一定不要忘記：在destroyed要取消監(jiān)聽，不然這個監(jiān)聽一直存在，代碼如下：
destroyed(){
window.removeEventListener('popstate',this.goBack,false);
}
到此需求4就解決了。
剛剛看了下代碼，其實路由守衛(wèi)做這個返回控制其實更簡單。只要好好使用beforeRouteLeave這個守衛(wèi)就能簡單解決以上問題
補(bǔ)充知識：vue 使用路由守衛(wèi)監(jiān)聽返回鍵，控制頁面跳轉(zhuǎn)
我就廢話不多說了，大家還是直接看代碼吧~
beforeRouteLeave(to, from, next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
// 可以訪問組件實例 `this`
if(!this.isPublish){
this.confirmVisible=true
next(false)//不放行
}else {
next()
}
},
以上這篇vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
我們都知道,輪播圖組件模板結(jié)構(gòu)通常是ul包裹li的結(jié)構(gòu),在vue中,li的數(shù)量也通常是由后端接口返回的數(shù)據(jù)決定,下面這篇文章主要給大家介紹了關(guān)于vue3封裝輪播圖組件功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
在 setup 語法糖中通過 import 引入的內(nèi)容，也可以直接在 template 標(biāo)簽中使用，這篇文章主要介紹了Vue?使用?setup?語法糖,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了在Uni中使用Vue的EventBus總線機(jī)制操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
詳解Vue 2中的? initState 狀態(tài)初始化
這篇文章主要介紹了詳解Vue 2中的initState狀態(tài)初始化，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
使用elementUI table展開行內(nèi)嵌套table問題
這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3+element Plus實現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue3+element Plus實現(xiàn)在table中增加一條表單數(shù)據(jù)的操作,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue+iview框架實現(xiàn)左側(cè)動態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實現(xiàn)左側(cè)動態(tài)菜單功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
百度了好久都沒辦法實現(xiàn)vue中一個頁面跳到另一個頁面，甚至到google上搜索也是沒辦法的，最終還是找了高人親自指導(dǎo)，所以下面這篇文章主要給大家介紹了關(guān)于Vue頁面跳轉(zhuǎn)動畫效果的實現(xiàn)方法，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue集成Iframe頁面的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻)
這篇文章主要介紹了vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03