发布于2023-03-17 05:50 阅读(1119) 评论(0) 点赞(18) 收藏(5)
在用 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
- }
- }
原文链接:https://blog.csdn.net/zk_html/article/details/127761179
作者:前端黄柠檬
链接:http://www.qianduanheidong.com/blog/article/505485/23c3e5a16cce1d6a6f0f/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!