路由配置
router—>index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route levell code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue'),
// children:[{
//...
// }]
},
{
path: '/qrcode',
name: 'qrcode',
component: () => import( /* webpackChunkName: "qrcode" */ '../views/QrcodePage.vue')
},
{
path: '/rout',
name: 'rout',
component: () => import( /* webpackChunkName: "rout" */ '../views/Rout.vue')
},
{
path: '/login',
name: 'login',
component: () => import( /* webpackChunkName: "login" */ '../views/Login.vue'),
meta: {
requiresAuth: false,
level: 1,
deepth: 1,
keepAlive: false,
}
},
{
path: '/shopping',
name: 'shopping',
component: () => import( /* webpackChunkName: "shopping" */ '../views/Shopping.vue'),
meta: {
level: 1,
deepth: 1,
keepAlive: true
},
},
{
path: '/shopDetail',
name: 'shopDetail',
component: () => import( /* webpackChunkName: "shopDetail" */ '../views/ShopDetail.vue'),
meta: {
level: 1,
deepth: 0.8,
keepAlive: true
},
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Vuex配置
store ---->index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cachedComponents: ['home'], //缓存的组件
},
getters: {
// 传入componentName 判断是否在cachedComponents缓存数组中
isCachedComponent: (state) => (componentName) => {
return state.cachedComponents.includes(componentName)
}
},
mutations: {
pushComToCache(state, componentName) {
console.log('已缓存当前组件');
state.cachedComponents.push(componentName)
},
deleteComFromCache(state, componentName) {
console.log('清除上一个缓存组件');
const index = state.cachedComponents.indexOf(componentName)
index !== -1 && state.cachedComponents.splice(index, 1)
},
},
actions: {},
modules: {}
})
在App.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<keep-alive :include="cachedComponents">
<!-- 显示需要缓存的组件 -->
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<!-- 显示不需要缓存的组件 -->
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
data() {
return {
include: ["home"],
};
},
computed: {
...mapState(["cachedComponents"]),
...mapGetters(["isCachedComponent"]),
},
watch: {
// 监听路由变化
$route(to, from) {
console.log("to.path", to);
console.log("from.path", from);
// 需要缓存的页面不在缓存数组中,添加白名单,进行缓存
if (
to.meta.level === 1 &&
to.meta.keepAlive &&
!this.isCachedComponent(to.name)
) {
this.$store.commit("pushComToCache", to.name);
}
//根据路由meta信息,清除缓存
if (
from.meta.level === 1 &&
from.meta.keepAlive &&
to.meta.deepth < from.meta.deepth
) {
this.$store.commit("deleteComFromCache", from.name);
}
},
},
};
</script>
完成!打开谷歌浏览器使用调试工具查看