再谈vue前进刷新，后退不刷新，include实现方法。

layman 发布于2019-08-22 18:43 / 2610人阅读

摘要：并设置后退页面数组。跳转到或页面，返回后回到缓存页面，不刷新。由其他页面进入则刷新。反正目前可以实现想要的效果。

关于填坑vue的前进刷新与后退不刷新，网上有很多方法，基本都是利用 keep-alive，但是试了好多种方法都不尽人意，后来有人提示说基于keepalive include，试验了一下找到了些思路，暂时实验可行，分享下共同探讨学习，也许不是最佳解决方案，但确实有效。这里需要用到vuex，如不用vuex可以自行用Local Storage代替。

1.修改主路由页面，keep-alive 标签添加 include

2.同时此页面添加自动computed includeds

computed:{
    includeds(){
        return this.$store.state.includeds
    }
 }

3.修改vuex的store，添加includeds对象，并添加commit方法。此处如不用vuex，也可自行设置Local Storage。

state: {
    includes: ""
},
mutations: {
    setIncludeds(state,setdata){
        state.includeds = setdata
    }
}

4.在main.js页面添加beforeEach路由守卫。并设置后退页面数组。如不用全局守卫，也可在页面多带带设置多带带写beforeRouteLeave，方法相同。

router.beforeEach((to, from, next) => {
    let addPage = ["addProduct","newEdit","showNews"];
    if (!mCd.inArray(to.name,addPage)) { //此处mCd.inArray的方法为判断数组是否包含，需要自己实现。
        store.commit("setIncludeds","");
    }
    next();
})

5.设置页面（news.vue)的name和activated

export default{
    name: "news",
    data() {
        return {
            ....
        }
    },
    activated(){
        this.$store.commit("setIncludeds","news"); //此处设置name一致的名称
    }
}

*注意：此处activated里设置的commit里第二个参数，必须与name名称一致。

6.然后就可以了。 原理解析：

1. 通过设置keepalive 的 include，当然也可以设置exclude，自行百度。include为要缓存的页面name
2. 在页面activated的时候设置为缓存当前页面。
3. 页面跳转的时候判断路由的to.name是否包含在已设置的数组中。
4. 跳转到edit或show页面，返回后回到缓存页面，不刷新。由其他页面进入则刷新。
5. 如果不设置路由全局守卫，也可以每个页面多带带写beforeRouteLeave

也不知道这样写对不对。反正目前可以实现想要的效果。另外路由嵌套不是很深。如果哪位大侠有更好的方法，欢迎提供。^_^

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96124.html

另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

摘要：如何添加这个条件，判断用户是否刷新了页面呢我们知道，当使用后，只有第一次进入后会触发钩子函数，再次进入就不再执行了。目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注：　此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求...

Ocean 2019-08-21 17:43 评论0 收藏0
实现一个前端路由，如何实现浏览器的前进与后退？

摘要：执行过程如下实现浏览器的前进后退第二个方法就是用两个栈实现浏览器的前进后退功能。我们使用两个栈，和，我们把首次浏览的页面依次压入栈，当点击后退按钮时，再依次从栈中出栈，并将出栈的数据依次放入栈。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你实现一个前端路由，应该如何实现浏览器的前进与后退？ 2. 问题...

刘东 2019-08-23 18:01 评论0 收藏0
Vue 实现前进刷新，后退不刷新的效果

摘要：点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。更多文章需求一：在一个列表页中，第一次进入的时候，请求获取数据。点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。解决方案在 App.vue...

zhisheng 2019-08-23 18:00 评论0 收藏0
原生 js 实现一个前端路由 router

摘要：实现原理现在前端的路由实现一般有两种，一种是路由，另外一种是路由。现在的前端主流框架的路由实现方式都会采用路由，本项目采用的也是。当值发生改变的时候，我们可以通过事件监听到，从而在回调函数里面触发某些方法。效果图： showImg(https://segmentfault.com/img/remote/1460000018058419?w=422&h=744); 项目地址：https...

gggggggbong 2019-08-26 13:30 评论0 收藏0
国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

U2FsdGVkX1x 2019-08-23 17:10 评论0 收藏0