1.字元集/字元編碼是什麼？ 字元集或者說字元編碼就是給字元定義了數值編號以及數值編號存儲格式。 嚴格來說字元集和字元編碼是兩個概念： charset 是 character set 的簡寫，即字元集。 encoding 是 charset encoding 的簡寫，即字元集編碼，簡稱編碼。 字元集 ...
想要實現前進更新後退銷毀，核心在操作keep-alive的include。
具體做法就是當進入新頁面時將頁面name保存，再次進入就將它之後的name刪除。
具體實現：
正常情況下頁面是線性前進的：
A->B->C->D
include數組數據[A,B,C,D]
當再次進入C，就認為是D返回C
include數組數據[A,B,C]
D頁面就被銷毀了,從而實現了後退銷毀
使用vuex保存include數組
const keep = {
namespaced: true,
state: () => {
return {
include: [],
}
},
getters: {
include(state) {
return state.include
},
},
mutations: {
add(state, name) {
let b = false
let i = 0
for (; i < state.include.length; ++i) {
let e = state.include[i]
if (e == name) {
b = true
break
}
}
if (!b) {
state.include.push(name)
} else {
state.include.splice(i + 1)
}
}
},
actions: {
}
}
export default keep
在beforeEach中添加name
import store from "../store"
router.beforeEach((to, from,next) => {
// 頁面name要和route 的name一樣
store.commit("keep/add", to.name)
next()
})
include使用
<template>
<router-view v-slot="{ Component }">
<keep-alive :include="includeList">
<component :is="Component" />
</keep-alive>
</router-view>
</template>
<script>
export default {
computed: {
includeList() {
return this.$store.getters["keep/include"].join(",");
},
},
};
</script>
當然還有頁面迴圈跳轉的情況，一般是詳情頁
A->A->A->A 或A->B->C->A->B->C
這種情況如果不需要保存頁面，就用wacth監控$route變化 重新請求介面
如果需要保存頁面，就用動態路由addRoute添加新的路由
A1->A2->A3->A4
import time from "../views/time"
function copyObj(obj) {
if (typeof obj == "object") {
if (Array.isArray(obj)) {
let arr = [];
for (let item of obj) {
arr.push(Object.assign(copyObj(item)));
}
return arr;
} else if (obj == null) {
return null;
} else {
let obj1 = {};
for (let index in obj) {
obj1[index] = copyObj((obj[index]));
}
return obj1;
}
} else if (typeof obj == "function") {
return Object.assign(obj);
} else if (typeof obj == undefined) {
return undefined;
} else {
return obj;
}
}
window.pushTime = function () {
let t = new Date().getTime();
let path = `/time/${t}`;
// 深複製component
time = copyObj(time)
// component name要和route 的name一樣
time.name = path
this.$router.addRoute({
path,
name: path,
component: time,
});
this.$router.push({
path,
});
}
vue2用vue-navigation 非常好用
