Vue Router 相同路由无参数，页面刷新的实现

た入场券 2021-11-05 12:48 408阅读 0赞

在项目做得差不多的时候，突然产品提了个这样的需求，例如页面导航目前在首页，再点击一次首页页面要刷新重新渲染，这个刷新不是F5的那种刷新

接到这个需求后我也在网上找了很多资料，例如：[https://blog.csdn.net/qq\_39009348/article/details/81700082][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

[https_blog.csdn.net_qq_39009348_article_details_81700082]: https://blog.csdn.net/qq_39009348/article/details/81700082