在项目做得差不多的时候，突然产品提了个这样的需求，例如页面导航目前在首页，再点击一次首页页面要刷新重新渲染，这个刷新不是F5的那种刷新
接到这个需求后我也在网上找了很多资料，例如：https://blog.csdn.net/qq_39009348/article/details/81700082
文章里说的方法也可以解决问题，但是在项目已经做得差不多的时候，这样要在每个页面都修改就很难受了，所以文章里的方法不适合我
1.我换了种方式，一开始App.vue用的是文章里提到的方法，这个是绕不开的，这里我用了Vuex全局状态控制来代替原文章里reload方法的作用
1 <template> 2 <div id="app"> 3 <router-view v-if="isRouterAlive"/> 4 </div> 5 </template> 6 <script> 7 export default { 8 computed:{ 9 isRouterAlive(){ 10 return this.$store.state.isRouterAlive // 用来解决路由相同不刷新问题 11 } 12 } 13 } 14 </script>
2.在store.js文件里定义isRouterAlive属性
1 import Vue from ‘vue‘ 2 import Vuex from ‘vuex‘ 3 4 Vue.use(Vuex) 5 6 export default new Vuex.Store({ 7 state: { 8 isRouterAlive: true 9 }, 10 mutations: { 11 setIsRouterAlive(state,data){ 12 state.isRouterAlive = data; 13 } 14 }, 15 actions: { 16 setIsRouterAlive(context,data){ 17 context.commit("setIsRouterAlive",data) 18 } 19 } 20 })
3.监听store的属性，避免异步问题
1 /** 2 * 监听isRouterAlive， 3 * 当被设为false时， 4 * 将它设为true，避免异步问题 5 */ 6 store.watch( 7 // 当返回结果改变... 8 (state) => { 9 return state.isRouterAlive 10 }, 11 // 执行回调函数 12 (newVal,oldValue) => { 13 if(!newVal){ 14 store.dispatch(‘setIsRouterAlive‘, true) 15 } 16 } 17 )
4.修改路由router.js，前置路由守卫拦截
1 import Vue from ‘vue‘ 2 import Router from ‘vue-router‘ 3 import store from ‘@/store‘ 4 // 立个flag，标识是不是第一次路由（F5刷新后第一次路由） 5 let flag = true; 6 //路由拦截器 7 // to: Route: 即将要进入的目标 路由对象 8 //from: Route: 当前导航正要离开的路由 9 router.beforeEach((to, from, next) => { 10 to.query.timestamp = new Date().getTime(); // 每次路由都加上参数，确保每次路由都能被拦截 11 if (to.path === from.path && Object.keys(to.query).length === 1 && !flag) { // 路由地址一样，参数个数等于1，也就是只有上面设置的默认参数，不是第一次路由 12 store.dispatch(‘setIsRouterAlive‘, false); // 设置isRouterAlive为false 13 14 } 15 next(); 16 flag = false; 17 18 }); 19 export default router;
这样子就实现了我的需求，只用修改4个文件，代码量不多，to.query.timestamp = new Date().getTime();这行代码很关键，没有这行代码，路由相同的路由时是没有任何一点反应的，不会进入守卫也不会被watch监听到，
原文：https://www.cnblogs.com/KingSir98/p/11283880.html