vue 点击当前路由重新加载该路由

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

需求：点击当前路由实现数据请求页面刷新 -- router.push(当前路由)并不会执行

刷新页面

1、window.reload()

2、this.$router.go(0)

 

但是这两种刷新时，整个浏览器进行了重新加载，跳跃，不平滑，体验不好

 

3、v-if ，控制router-view的显示或隐藏，从而控制页面的再次加载，

 

如果是菜单，感觉控制菜单显隐不太好

 

4、借助第三方组件实现两次路由跳转

思路： 　　

　　1）判断是否点击的当前路由，如果是，则跳转到空白的第三方组件，并传递当前路由。

　　2）在空白组件中 created 的生命周期中接受参数，并执行页面跳转，此时页面不会显示任何内容就开始进行跳转，所以速度的问题不用担心，视觉上的效果就是点击当前路由后，页面刷新请求数据。实际路由已经跳转了两次。

//菜单点击的回调
handleSelect(key, keyPath) {
      if(key === this.$route.path){
        // this.$router.go(0)
        // this.$router.push(key)
        this.$router.push({
              path: \'black\',
              query: key
        })
      }
}

// 空白模板 
<template>
  <div></div>
</template>
<script>
  export default {
    data() {
      return {};
    },
    created() {
      const path = this.$route.query;
      this.$router.push({
        path
      });
    }
  };
</script>
<style>
</style>

      console.log(\'设置或获取对象指定的文件名或路径               -- window.location.pathname---\',   window.location.pathname);
      console.log(\'设置或获取整个 URL 为字符串                   -- window.location.href--------\',  window.location.href);
      console.log(\'设置或获取location或URL的hostname和port号码   -- window.location.host-------\',   window.location.host);
      console.log(\'设置或获取与 URL 关联的端口号码               -- window.location.port--------\',   window.location.port);
      console.log(\'设置或获取 URL 的协议部分                     -- window.location.protocol---\',    window.location.protocol);
      console.log(\'设置或获取 href 属性中在井号“#”后面的分段      -- window.location.hash-------\',    window.location.hash);
      console.log(\'设置或获取 href 属性中跟在问号后面的部分       -- window.location.search------\',   window.location.search);
      console.log(\'获取当前网页的域名                            -- document.domain-------------\',   document.domain);
      console.log(\'获取当前网页的路由                            --this.$route.path-------------\',   this.$route.path);

以上是 vue 点击当前路由重新加载该路由 的全部内容， 来源链接： utcz.com/z/379443.html

回到顶部