vue $router.go(-1)的使用

在项目中可能会遇到这样的问题，就是跳到详情在返回来还希望保持原来的搜索结果，就是不希望刷新，这个时候呢keep-alive就起到了很大的作用

接下来就说说如何使用keep-alive来动态缓存页面的。

一： 直接在外边加一层keep-alive就是全部缓存，返回都不刷新

比如在App.vue

<template><div id="app"><keep-alive><router-view></router-view></keep-alive></div>
</template>

二：配合路由使用，动态去缓存你所需要缓存的，而不是全部缓存。

需要在router.js里边配置

const router = new Router({// mode: 'history',routes: [{path: '/', // 这个斜杠就是默认跳转的页面name: 'index',component: resolve => require(['@/components/index'], resolve),meta: {requiresAuth: true,keepAlive: false,}},{path: '/index',name: 'index',component: resolve => require(['@/components/index'], resolve),meta: {requiresAuth: true,   //设置此项则表示必须登录才能进入keepAlive: false,     //若为false则初始不缓存，若为true则表示缓存}},{path: '/index2',name: 'index2',component: resolve => require(['@/components/index2'], resolve),meta: {requiresAuth: true}}]
}）

然后在路由导航守卫去做权限处理

我是写在route/index.js中，这个看你不要求
//  判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {if (to.path == '/orderDs' || to.path == '/interveneDs' || to.path == '/afterSaleDs' || to.path == '/checkDs' || to.path == '/auditDs' || to.path == '/addVertising' || to.path == '/buyerDs' || to.path == '/gsQueryDs') {from.meta.keepAlive = true;   // from.meta  表示缓存列表页next();}else{from.meta.keepAlive = false;next();}
})export default router

接下来看看在app.vue中的处理

<template><div id="app">
需要缓存的<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive>
不需要缓存的<router-view v-if="!$route.meta.keepAlive"></router-view></div>
</template>

当我们使用缓存的时候
如果遇到我们界面做了一些操作，然后跳转回来需要把一些数据默认为原本的值

可以使用watch来监听$router

watch:{$router:{handler(val){if(val.name==='menberList'){this.getTableData()}}}}