背景:
在用 spa(单页面应用) 这种开发模式的之前,也就是多页面开发模式下,用户每次点击侧边栏都会重新请求这个页面,用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。
如今:
大多都是spa这种,但 spa 就不一样了,当用户点击当前高亮的路由并不会刷新 view,因为 vue-router 会拦截你的路由,它判断你的 url 并没有任何变化,所以它不会触发任何钩子或者是 view 的变化。
业界比较推荐的方案:
方案一:
通过不断改变 url 的 query 来触发 view 的变化。我们监听侧边栏每个 link 的 click 事件,每次点击都给 router push 一个不一样的 query 来确保会重新刷新 view。
样例代码如下:
clickLink(path) {
this.$router.push({
path,
query: {
t: +new Date() //保证每次点击路由的query项都是不一样的,确保会重新刷新view
}
})
}
前提: router-view 中要加 key。
<router-view :key="$route.path"></router-view>
方案二:
判断当前点击的菜单路由和当前的路由是否一致,在判断一致的时候,会先跳转到一个专门 Redirect 的页面,它会将路由重定向到我想去的页面,这样就起到了刷新的效果了。
点击的时候重定向页面至 /redirect。代码如下:
const { fullPath } = this.$route
this.$router.replace({
path: '/redirect' + fullPath
})
redirect 页面代码如下:
export default {
beforeCreate() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' + path, query })
},
render: function(h) {
return h()
}
}
注意: 上面代码使用 replace 而不是使用 push 的原因是 push 会留下history记录,replace 不会留下history记录,这样,在多次刷新同一个页面时,再次返回操作时,返回的就不会是自身路由页面了,会返回到最初来源的那个页面,即最后一次 push (history里最后一次记录) 跳转过来的那个页面。