vue 路由跳转 刷新当前页面（vue 项目中刷新当前路由）

摘要

        在用 spa(单页面应用) 这种开发模式之前    
    
    
，用户每次点击侧边栏都会重新请求这个页面  


     


     


    ，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯 
    
    
    。但现在 spa 就不一样了


 




 




 


，用户点击当前高亮的路由并不会刷新 view   

   

   

，因为 vue-router 会拦截你的路由   

     

     

   ，它判断你的 url 并没有任何变化



  




  




  

，所以它不会触发任何钩子或者是 view 的变化
     


     


     


。

使用场景

        当可能需要触发路由保护时  


  


  


，重新加载很有用 




 




 




。例如    
     
     
  ，假设用户在一个页面中注销并且还处在当前页面 A 中 

   

   

   。A 可能允许访客使用




   




   




   
，但它可能仅限于登录用户
     

     

     

。这就是为什么在页面 A 上需要重新刷新 



 



 



，A 上的路由守卫会触发重定向到主页或登录页面                ，不然你就可以一直点击页面 A 的侧边栏




    




    




    ，而不被拒绝访问  




  




  




。

解决方法

1 
    
    
    、上一篇博客中有一个方法（v-if）

2
     


     


     


、不改变 current URL 就不会触发任何东西















，那可不可以强行触发 hook 呢？通过不断改变 url 的 query 来触发 view 的变化 


  


  


  。监听侧边栏每个 link 的 click 事件               ，每次点击都给 router push 一个不一样的 query 来确保会重新刷新 view
     
     
     
。

clickLink(path) { this.$router.push({ path, query: { t: +new Date() // 保证每次点击路由的query项都是不一样的 



     



     



     ，确保会重新刷新view } }) }

ps：不要忘了在 router-view 加上一个特定唯一的 key















，如 <router-view :key="$route.path"></router-view>    
    
    
，但这也有一个弊端就是 url 后面有一个很难看的 query 后缀如 xxx.com/article/list?t=1496832345025 

3 




 




 




、还可以判断当前点击的菜单路由和当前的路由是否一致  


     


     


    ，若一致的时候


 




 




 


，会先跳转到一个专门 Redirect 的页面   

   

   

，它会将路由重定向到想去的页面   

     

     

   ，这样就起到了刷新的效果了   




   




   




。

点击的时候重定向页面至 /redirect

const { fullPath } = this.$route this.$router.replace({ path: /redirect + fullPath })

redirect 页面在重定向回原始页面

// redirect.vue export default { beforeCreate() { const { params, query } = this.$route const { path } = params this.$router.replace({ path: / + path, query }) }, render: function(h) { return h() // avoid warning message } }