Vue点击当前路由实现刷新功能

最新推荐文章于 2023-07-18 14:52:58 发布

瞎转悠达

最新推荐文章于 2023-07-18 14:52:58 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_35859392/article/details/110037705

版权

本文探讨了在使用Vue.js进行Web应用开发时遇到的一个具体问题：如何解决点击侧边栏菜单项时，如果当前路径与点击路径相同无法刷新页面的问题。文中提供了一种通过判断路径是否相同并使用特定方法触发页面重新加载的有效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试提了一个bug，就是当前页面点击所在的侧边栏，页面没有刷新

<div v-for="item in navAsideList" :key="item.index">
                  <el-submenu v-if="item.child&&item.child.length&&item.power" :index="item.index">
                    <template slot="title">
                      <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="val in item.child" :key="val.index" :index="val.index">
                      <router-link slot="title" :to="val.path" @click.native="repeatRouter(val.path)">{{ val.name }}</router-link>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item v-else :index="item.index">
                    <router-link slot="title" :to="item.path" @click.native="repeatRouter(item.path)">{{ item.name }}</router-link>
                  </el-menu-item>
                </div>

repeatRouter(path) {
      if (path == this.$route.path) {
        this.$router.go(0)
      } else {
        this.$router.path(path)
      }
    },

当路由相同是使用path跳转好像无用，需要使用go(0)来实现刷新页面