zoukankan      html  css  js  c++  java
  • vue+element刷新当前路由

    如何做到每次点击相同的路由地址都去渲染页面?

    需求是后台管理系统的菜单导航,点击同一个菜单需要刷新页面,跟之前做多页面应用要达到一样的效果,

    以下是网上找到的方法(我的vue版本是2.5,vue-router 3.0)

    1.加时间戳

        reloadRouter(path) {
          this.$router.push({
            path,
            query: {
              t: +new Date()
            }
          });
        } 

    此方法无效

    2.

        this.$router.go(0);

    此方法有效,但是整个页面都刷新了,

    最后的解决办法是创建一个空的组件,redirect.vue,

    每次点击跳转到redirect空白页,并且以params或者query把当前点击的路由地址传过去,(params传值配置路由时需要name属性)

    redirect页面渲染完成在取到路由带过来的地址在进行跳转,在空白页面的停留时间非常短暂,这点不需要担心。

    完成!

    这里还需提醒一下

    当你点击菜单的时候判断一下是不是相同的路由地址,是的话跳转到redirect,否则正常跳转

    <template>
    </template>
    <script>
    export default {
      name: 'ZRedirect',
      created() {
        const path = this.$router.currentRoute.params;
        this.$router.push(path);
      }
    };
    </script>
        reloadRouter(path) {
          this.$router.push({
            name: 'redirect',
            params: {
              path: path
            }
          });
    
          this.$router.push({
            path: 'redirect',
            query: {
              path: path
            }
          });
        }
  • 相关阅读:
    Next Permutation
    Substring with Concatenation of All Words
    Divide Two Integers
    Remove Duplicates from Sorted Array
    3sum closest
    ThreadPoolExecutor参数与拒绝策略
    多线程情况下ArrayList 如何解决线性安全问题
    ArrayList扩容机制jdk1.8
    SpringCloud--工作流程(好文)
    Java面试——TCP与HTTP
  • 原文地址:https://www.cnblogs.com/luojianjian/p/9377170.html
Copyright © 2011-2022 走看看