精华内容
下载资源
问答
  • 主要介绍了Vue keepAlive 数据缓存工具,实现返回上一页面浏览的位置,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue 返回上一页面不刷新

    千次阅读 2020-11-04 13:21:52
    Vue 返回上一页面不刷新 场景:首页点进列表页时要刷新数据,信息页返回列表页时不刷新数据 首先在router.js中配置 { path: '/home', name: 'home', meta: { title: '首页', }, component: ...

    Vue 返回上一页页面不刷新

    场景:首页点进列表页时要刷新数据,信息页返回列表页时不刷新数据

    首先在router.js中配置

    		{
    			path: '/home',
    			name: 'home',
    			meta: {
    				title: '首页',
    			},
    			component: () => import('./views/home/index.vue'),
    		},
    		{
    			path: '/info/:id',
    			name: 'info',
    			meta: {
    				title: '信息',
    				keepAlive: true,///此组件需要缓存
    				isBack: false,//用来判断是否是返回上一页
    			},
    			component: () => import('./views/home/info.vue'),
    		},
    		{
    			path: '/home/view',
    			name: 'view',
    			meta: {
    				title: '详情',
    			},
    			component: () => import('./views/home/view.vue'),
    		},
    

    在App.vue中设置需要缓存的页面

        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" class="Router" ></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" class="Router" ></router-view>
    

    在中间页面就行判断

      beforeRouteEnter(to, from, next) {
        //from从哪个页面过来的信息
        //to 到哪个页面来
        console.log(to)
        console.log(from)
        //用来判断是否缓存
        if (from.name === 'view') {
          to.meta.isBack = true
        }
        if (from.name === 'home') {
          to.meta.isBack = false
        }
        next()
      },
      //如果不设置keepAlive:beforeRouteEnter--》created--》  mounted--》destroyed
      //因为设置了keepAlive第一次进入时keepAlive会运行beforeRouteEnter--》activated--》created--》  mounted--》deactivated
      //第二次进入时只会运行beforeRouteEnter--》activated--》deactivated
      activated() {
        if (!this.$route.meta.isBack) {beforeRouteEnter--》activated--》created--》  mounted
          const { id } = this.$route.params
          this.id = id
          this.loadData()
        }
      },
    
    展开全文
  • vue返回上一页面时不刷新

    千次阅读 2019-12-10 20:03:59
    在日常使用的时候,我们经常需要返回上一页面的时候,不刷新页面,保持页面不变,这里就需要使用以下方法: 思路: 因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1)....

    前景:

    在日常使用的时候,我们经常需要返回上一级页面的时候,不刷新页面,保持页面不变,这里就需要使用以下方法:

    思路:

    因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:
    (1).在App.vue中加入:这里是所有页面切换到地方,下面代码分别对不同的设置,采用不同的渲染方式。

    <template>
      <div id="app">
        <!--<router-view/>-->
        <!--页面返回不刷新-->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>
    

    (2).index.js页面
    在需要设置不刷新的页面中,只需要添加 keepAlive: true就可以。

    
    export default new Router({
      routes: [{
        path: '/',
        name: 'index',
        component: index,
        meta: {
          keepAlive: true
        }
      },
    

    至此返回上级页面不刷新功能实现:因为在index.vue中,mounted方法只走一次,在浏览器上实现了返回原来滚动位置的目的。

    说明

    备注:一般执行完上一步的时候就已经实现方法了,如果在手机上测试,发现没用:可以试着添加下面的代码试一下:

    //在页面离开时记录滚动位置
    beforeRouteLeave (to, from, next) {
        this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        next()
      },
    
    //进入该页面时,用之前保存的滚动位置赋值
    beforeRouteEnter (to, from, next) {
        next(vm => {
          document.body.scrollTop = vm.scrollTop
        })
      },
    

    至此完美结束,算是一个比较常见而且简单的功能了。

    展开全文
  • VUE返回上一页保存上一页面数据 <template> <div> 页面信息 </div> </template> <script> exportdefault{ data(){ return{ accountCnt:"", receivableTotal:"", ...

    VUE中返回上一页保存上一页面的数据

     

    <template>

      <div>

           页面信息

      </div>

    </template>

    <script>

    export default {

      data() {

        return {

          accountCnt: "",

          receivableTotal: "",

          receivedTotal: "",

          receivableRemainPriceTotal: "",

          overdueTotal: "",

          lmOverduePriceTotal: "",

          curAddPriceTotal: "",

          curReceivablePriceTotal: "",

          curreceivedSumTotal: "",

          unpaidSumTotal: "",

          exportList: [],

          zqclaimFlag: "",

          currentPage: 1,

          pageSize: this.GLOBAL.pageSize,

          total: 0,

          tableData: []

        };

      },

      methods: {

    getObjectData(target, current, cb) {

       //对象赋值

      if (!(target instanceof Object) || !(current instanceof Object)) return;

      Object.keys(target).forEach(function (name) {

        let value = current[name];

        if (typeof value !== "undefined" && target.hasOwnProperty(name)) {

          // 如果有callback,先执行callback

          if (typeof cb === "function") {

            target[name] = cb(name, value);

            return;

          }

          // 如果是对象,进行深层次拷贝

          if (Object.prototype.toString.call(target[name]) === "[object Object]") {

            getObjectData(target[name], current[name], cb);

            return;

          }

          target[name] = value;

        }

      });

    }

      },

      mounted() {

      },

      beforeMount() {

        this.expiryDate = this.getNowFormatDate();

        var _data_str = sessionStorage.getItem("SCM401");

        //将json字符串转成对象

        var store_data = JSON.parse(_data_str);

        if (_data_str) {

          this.getObjectData(this._data, store_data);//在页面加载前,取得缓存中页面数据,并复制给data

        }

      }

    };

    </script>

     

    展开全文
  • VUE 返回上一页 不刷新页面

    万次阅读 多人点赞 2018-10-31 12:35:03
     方法页面只刷新次,任何页面跳转到这个页面都不刷新) 直接在你的router-view 标签外面包个keep-alive 加include="组件名称" &lt;keep-alive include="FileList"&g...

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

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

     方法一(页面只刷新一次,任何页面跳转到这个页面都不刷新)

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

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

     方法二(keep-alive与vue-router配合使用)

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

    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 }
      ]
    })
    
    
    

     配置入口文件

            <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里面的,这个就随你高兴了)

    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什么的不知道的话,请看我的以前一篇博客传送门

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

     

    展开全文
  • 对于该问题我们在要进入的页面监听路由的变化 // 比如要对type重新赋值请求,就得在监听路由的方法getpage里面进行赋值 data(){ return{ type:"" } } created(){ this.getpage() } watch:{ '$route':...
  • VUE 返回页面刷新数据

    千次阅读 2020-01-16 11:46:17
    VUE 返回页面刷新数据 监听路由 watch: { //不推荐 用户体验不好 '$route' (to, from) { // 路由发生变化页面刷新 this.$router.go(0); } }, watch: { '$route' (to, from) { this.方法名();//返回...
  • vue返回上一页的时候执行this.$router.go(-1) ,默认会让上一页重新执行遍生命周期。 解决方法:缓存上一页的数据,让其在已经存在的情况下,再次显示不重新执行生命周期; 模板代码 (分发路由的页面): <!-...
  • Vue返回上一页保留数据

    千次阅读 2021-03-09 11:53:01
    1.配置路由,代码如下 export default new Router({ routes: [ { path: '/hello', name: 'HelloWorld', component: HelloWorld, meta: { ...在App.vue文件里修改,代码如下: 3.使用$router.back()返回,才能生效。
  • 主要给大家介绍了关于Vue利用History记录上一页面数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • //此地方用的是uni的返回上一页方法,如需其他的返回方法请进行相对应替换 }, 2.页面接收参数(在onShow里) onShow(){ let that = this; uni.$on("planAdd", res => { console.log(res); let tabIndex =...
  • vue返回上一页的时候执行this.$router.go(-1) ,默认会让上一页重新执行遍生命周期。 有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,...
  • vue返回上一页不刷新页面

    千次阅读 2020-11-20 16:26:02
    项目需求:由于公司产品较多页面加载相对慢,所以每次进行页面的刷新影响客户下单的效率。 1.首先对router.js进行操作 import indexOne from '@/components/indexOne' { path: '/indexOne', name: 'indexOne', ...
  • 跳转页面 js方法: 参考链接 window.open('http://www.baidu.com','_blank'); //新页面打开 window.open('http://www.baidu.com','_self'); //当前页面打开 html标签: //在a标签中跳转,用target: <a href=...
  • 在第页面填写数据后存入本地缓存; 再次跳转回来时判断是否填入数据,如果有数据,将缓存数据填写。 转载于:https://www.cnblogs.com/Zsir-000/p/10691849.html...
  • 在当前页面中,选中了某个标签中的问题,然后跳转到问题页面,按返回按钮返回到当前页面,继续选中之前的选中标签 实现效果如下图: 实现逻辑如下: 进入当前页面的时候,页面路由为...
  • 我分页封装的组件,具体代码... // 为了在删除最后页的最后数据时能成功跳转回最后页的上一页 const totalPage = Math.ceil((this.count - 1) / this.pageSize) // 总页数 this.currentPage = this.cur...
  • 主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1,我们可以在项目中新建个空实例对象,作为中央数据总线,用来传递和接收数据,具体如下 新建个文件夹 eventListener文件夹在src中,然后新建js文件,命名为listener(可以随意命名) 内容如下 import Vue from ...
  • 1、当我们需要前往另页面去做其他操作后,返回上一页面上一页面的状态会被刷新,我们需要让上一页面的状态保留。 2、当我们返回上一页的时候如何把参数传回上一页。 解决思路: 1、使用keep-alive:...
  • -- // keep-alive 查询列表页面查看详情页面时,详情页面返回以后,查询列表页面的查询参数等数据全部缓存,重新查询时重新刷新获取数据。--> <keep-alive> <router-view v-if="$route.meta.keepAlive...
  • vue 返回上一页 带参数

    千次阅读 2020-04-01 22:30:50
    返回上一页用的是 this.$router.go(-1) 那么只能在返回之前将参数放在localStorage里面 ...返回上一页面之后,拿到数据,再清空localStorage let searchKeyword=localStorage.getItem('searchKey...
  • vue ios返回上一页面后不刷新问题

    千次阅读 2020-04-17 17:59:02
    created() { var _this = this; var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; var isIOS = !...
  • vue 返回刷新页面 不keepAlive

    千次阅读 2019-01-04 16:15:51
    从列表页面,选择数据点击进去查看详情,这时候页面刷新了,并且执行了 created()方法和 mounted()方法,这个时候返回上一页,也就是列表页面,选择另外数据点击进来查看详情,页面上保留的还是上一条...
  • 页面中要展示的内容是从弹窗中选择的,也可以说是从另页面带回来的数据。 点击添加按钮打开个弹窗,弹窗中是要添加的数据,选择好数据带回当前页面展示,这个问题对于我个出入职场的后端小白来说实现...
  • VUE 返回页面不刷新实现代码

    千次阅读 2019-09-17 12:19:41
    VUE 默认的keep-alive组件实现 实现方式: 1.在路由内设置页面是否需要缓存; 示例代码:(在需要的组件里面添加meta 对象,keepAlive属性,keepAlive的值为是否需要缓存组件) { path:'/UpInfo', name:'...
  • 常用的:keep-alive路由缓存(不多解说) 但上面很多时候,因页面需求...我们可以使用vuex储存滚动的位置(因页面会做接口请求数据,所以要在数据渲染完成后,再进行跳转) store.commit('SET_ROUTER_POSITION', s.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,087
精华内容 24,434
关键字:

vue返回上一页面数据

vue 订阅