vue系列之---- 跳转同一路由,页面不可刷新不可跳转问题解决方案

在项目中经常有这样的需求，同一页面路由根据不同参数，渲染不同数据、不同效果、甚至重新刷新整个页面。但由于路由的强缓存原因，同一路由跳转往往不会进行刷新，故而总结了几种解决办法。

方法1：

实现原理：

点击当前菜单，先跳转过渡空白页面，再跳转原页面；

实现优点

简单方便快速统一

实现缺点

所有页面都将进行刷新，且因跳转其他页面故反应时间较长

实现代码

1. 新建empty.vue

<template></template>
<script>

export default {
  data () {
    return {
    }
  },
  created () {
    // 获取当前的路由
    let path = this.$route.params.link
    //替换为原先路由
    this.$router.replace({
      path: path,
      query: {}
    })
  }
}
</script>

2. 新建back路由

{
        path: '/back',
        name: 'back',
        component: () => import(/* webpackChunkName: "back" */ '@/views/empty.vue')
    },

3. 在菜单点击事件跳转路时增加兼容（点击当前页面才需要先跳转空白页面再返回）

 if (this.$route.path == currentNav.path) {
                    this.$router.push({
                        name: 'back',
                        params: {
                            link: currentNav.path//当前路由
                        }
                    })
                } else {
                    this.$router.push(currentNav.path)
                }

方法2：

实现原理：

在路由后面添加随机参数监听路由的修改，进而刷新页面

实现优点

可按需加载，即可强制刷新整个页面，也可重新调用页面中的部分方法

实现缺点

代码较为冗余，需要的页面都需要监听修改

实现代码

1. 在菜单点击事件跳转路时增加随机参数

   this.$router.push({ path: currentNav.path, query: { random:Date.parse(new Date()) } })

2. 监听路由修改，在有需要的页面添加

// 监控data中的数据变化
watch: {
    $route(to, from) {
      if (this.$route.query.random) {
        console.info( "加载页面数据" );
      }
    }
},


//或者使用beforeRouteUpdate 导航位置监听路由变化
beforeRouteUpdate(to, from, next) {
    console.info("==当前路由id==" + this.$route.query.id);
    if (this.$route.query.random) {
      console.info("加载页面数据");
    }
    next();
},

方法3：

实现原理：

使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。

如果想强制刷新，可以在根路由上为其分配一个唯一key。采用$route.fullpath或者时间戳作为其唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件

实现优点

简单方便快速统一

实现缺点

所有页面都将进行刷新，效率较差，部分无法生效

实现代码

<router-view :key="$route.fullPath"/>
<router-view :key="Date.parse(new Date())"/>