页面刷新(vue)

原文链接https://baijiahao.baidu.com/s?id=1700328557526256583&wfr=spider&for=pc

 

push和replace这两个都方法都是vue-router提供的api。

在vue项目中使用this.$router.push()方法来跳转不同路径,如果跳转相同的路径的话会发现页面并没有刷新，而是在histry栈中添加了一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

使用this.$router.replace()方法报错vue-router.esm.js?8aaf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location这个是由于多次访问相同路由导致路由重复。

转化

将要刷新的路由和刷新后的路由之间通过一个桥梁(作为过渡)来连接。

将路由的信息和参数全部都传给"桥梁",当其跳转的一瞬间获取到参数和路由信息跳转到原来的路由。为了让用户无感知在跳转"桥梁"路由的时候使用replace方法不会向history中添加新的记录,在跳回原路由的时候是history方法，如果路由相同会替换之前的路由，而用户在点击浏览器回退按钮的时候悄然不知做了什么。

路由router

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },

//views/redirect/index 组件

<script>
//刷新页面用
export default {
  created () {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function (h) {
    return h() // avoid warning message
  }
}
</script>

调用

 refreshSelectedTag(view) {
      this.$store.dispatch("tagsView/delCachedView", view).then(() => {
        const { fullPath } = view;
        this.$nextTick(() => {
          this.$router.replace({
            path: "/redirect" + fullPath,
          });
        });
      });
    },