VUE 返回上一页 不刷新页面

版权声明：原创内容，版权所有【web_hwf@sain.com】 https://blog.csdn.net/weixin_42406046/article/details/83579263

网上有很多种方法，刚开始看的时候都感觉莫名奇妙。不知道他们说啥，理解能力有限，我梳理了一下。

这里我介绍的主要是两种缓存某个页面的方法fang

 方法一（页面只刷新一次，任何页面跳转到这个页面都不刷新）

直接在你的router-view  标签外面包一个keep-alive  加include="组件名称"

[code]<keep-alive  include="FileList">
<router-view></router-view>
</keep-alive>

这时候匹配到的组件就会值加在一次。这个就比较简单，但能使用性不广。

 方法二（keep-alive与vue-router配合使用）

配置路由的时候需要加  keepAlive: true  参数 （我把代码完整贴出来，有点长）

[code]import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login/Login'
import Regist from '@/components/Login/Regist'
import P404 from '@/components/404/404'
import Loading from '@/components/404/Loading'
import Main from '@/components/Main'
import User from '@/components/Basic/User' //用户
import Role from '@/components/Basic/Role' //角色
import Department from '@/components/Basic/Department'  //部门
import RPermissions from '@/components/Basic/RPermissions'  //角色权限设置
import DPermissions from '@/components/Basic/DPermissions'  //部门权限设置
import RoleList from '@/components/Basic/RoleList'  //角色成员列表
import DeparmentList from '@/components/Basic/DeparmentList'  //部门成员列表
import LogLogin from '@/components/Basic/LogLogin'  //登录日志
import LogOperation from '@/components/Basic/LogOperation'  //操作日志
import LogFile from '@/components/Basic/LogFile'  //文件日志
import Class from '@/components/Basic/Class'  //文件日志
import SetFile from '@/components/Basic/SetFile'  //文件上传
import FileAudit from '@/components/Basic/FileAudit'  //文件审核
import FileList from '@/components/Basic/FileList'  //文件列表
import FileView from '@/components/Basic/FileView'  //文件预览

Vue.use(Router)

export default new Router({
mode: 'hash',//history
routes: [
{
path: '/login',//登录页
name: 'Login',
component: Login
},
{
path: '/regist',//注册页
name: 'Regist',
component: Regist
},
{
path: '/',//首页
name: 'Main',
component: Main,
redirect: '/Loading',//默认子路由
meta: {
requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
keepAlive: false, //此组件不需要被缓存
},
children: [
{
path: 'user',//用户管理
component: User,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'role',//角色管理
component: Role,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'department',//部门
component: Department,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'rpermissions',//角色权限设置
component: RPermissions,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'dpermissions',//部门权限设置
component: DPermissions,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'rolelist',//角色成员列表
component: RoleList,
meta: {
requireAuth: true,
},
},
{
path: 'deparmentList',//部门成员列表
component: DeparmentList,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'loglogin',//登录日志
component: LogLogin,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'logoperation',//操作日志
component: LogOperation,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'logfile',//文件日志
component: LogFile,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'class',//文件分类
component: Class,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'setfile',//文件上传
component: SetFile,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'fileaudit',//文件审核
component: FileAudit,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'filelist',//文件列表
component: FileList,
meta: {
requireAuth: true,
keepAlive: true, // 此组件需要被缓存
},
},
{
path: 'fileview',//文件预览
component: FileView,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
},
{
path: 'Loading',//等待页面
component: Loading,
meta: {
requireAuth: true,
keepAlive: false, //此组件不需要被缓存
},
}
]
},
{ path: '*', component: P404 }
]
})

 配置入口文件

[code]        <keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件，比如 Home！ -->
</router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->

之后在 router.beforeEach  方法里面来动态修改 keepAlive  的值 （我的是这个代码是放在main.js里面的，这个就随你高兴了）

[code]router.beforeEach((to, from, next) => {
iView.LoadingBar.start();//loadong 效果

//进入登录页面的时候清除 token
if(to.path === '/login' ){
sessionStorage.removeItem("token", '');
sessionStorage.removeItem("user_Data", '');
}

store.state.token = sessionStorage.getItem('token');//获取本地存储的token

if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
if (store.state.token !== "" && store.state.token !== null) {  // 通过vuex state获取当前的token是否存在

//判断是否需要缓存
if(to.path === '/filelist' && from.path === '/fileview'){
to.meta.keepAlive = true;  // 让 列表页 缓存，即不刷新
next();
}else {
to.meta.keepAlive = false;  // 让 列表页 即不缓存，刷新
next();
}

}else {
next({
path: '/login',
query: {redirect: from.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}

}else {
next();
}
})

 我这里只判断  to.path === '/filelist' && from.path === '/fileview' (翻译从文一下这个代码，本路径是fileview，要跳转的路径是filelist，也就是从fileviewlu路径跳转到filelist，不刷新filelist页面）表页的时候缓存，外面的那些token什么的不知道的话，请看我的以前一篇博客传送门。

这里我们就可以愉快的使用之前缓存是数据了。

 

阅读更多