vue 项目中刷新当前路由

最新推荐文章于 2024-03-14 09:30:00 发布

原创最新推荐文章于 2024-03-14 09:30:00 发布 · 6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

2 篇文章

订阅专栏

在SPA（单页面应用）中，用户点击已激活的路由不会刷新视图，因为vue-router会拦截相同的URL。为了解决这个问题，可以使用几种策略：通过改变query参数强制触发更新；监听侧边栏链接并每次点击时赋予不同的时间戳作为query，确保视图刷新；或者在点击相同路由时先重定向到一个中间页面再返回，以达到刷新效果。这些方法能确保在需要时执行路由保护和刷新视图。

摘要

在用 spa(单页面应用) 这种开发模式之前，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了，用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。

使用场景

当可能需要触发路由保护时，重新加载很有用。例如，假设用户在一个页面中注销并且还处在当前页面 A 中。A 可能允许访客使用，但它可能仅限于登录用户。这就是为什么在页面 A 上需要重新刷新，A 上的路由守卫会触发重定向到主页或登录页面，不然你就可以一直点击页面 A 的侧边栏，而不被拒绝访问。

解决方法

1、上一篇博客中有一个方法（v-if）

2、不改变 current URL 就不会触发任何东西，那可不可以强行触发 hook 呢？通过不断改变 url 的 query 来触发 view 的变化。监听侧边栏每个 link 的 click 事件，每次点击都给 router push 一个不一样的 query 来确保会重新刷新 view。

clickLink(path) {
  this.$router.push({
    path,
    query: {
      t: +new Date() // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
    }
  })
}

ps：不要忘了在 router-view 加上一个特定唯一的 key，如 <router-view :key="$route.path"></router-view>，但这也有一个弊端就是 url 后面有一个很难看的 query 后缀如 xxx.com/article/list?t=1496832345025

3、还可以判断当前点击的菜单路由和当前的路由是否一致，若一致的时候，会先跳转到一个专门 Redirect 的页面，它会将路由重定向到想去的页面，这样就起到了刷新的效果了。

点击的时候重定向页面至 /redirect

const { fullPath } = this.$route
this.$router.replace({
  path: '/redirect' + fullPath
})

redirect 页面在重定向回原始页面

// redirect.vue
export default {
  beforeCreate() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}