vue-router切换不同参数共用路由来显示页面的方法
【摘要】
遇到需要切换页面显示,重新请求接口但是前端路由不变时的一种处理方法
项目基于element-UI开发。页面左侧菜单控制右半部分内容显示，但是设计稿上有几个差异较大的页面需要共用一个路由，高亮显示菜单。 网上搜索一番后决定采取query传参的方式来在同一个路由上切换显示不同页面。
处理方法可能遇到的问题参考资料
# 处理方法
页面内监听路由变化
...
遇到需要切换页面显示,重新请求接口但是前端路由不变时的一种处理方法
项目基于element-UI开发。页面左侧菜单控制右半部分内容显示，但是设计稿上有几个差异较大的页面需要共用一个路由，高亮显示菜单。
网上搜索一番后决定采取query传参的方式来在同一个路由上切换显示不同页面。
# 处理方法
- 页面内监听路由变化
watch: {
$route(to, from) {
// 获取query中的参数
if (to.query.param1) {
this.param1 = to.query.param1
}
},
},
- methods跳转方法修改
methods: {
...
edit(id) {
this.$router.push({ path: '/xxx/xxx', query: { id: id } })
},
...
}
效果->路由发生改变并跳转到了当前页面，同时页面左侧菜单高亮保持不变，数据进行了重新加载
# 可能遇到的问题
跳转当前路由可能遇到如下错误
message: "Navigating to current location (XXX) is not allowed"
此时在src/router/index.js里导入router的后面追加如下方法即可
import VueRouter from 'vue-router'
...
// fix Navigating to current location
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
# 参考资料
文章来源: blog.csdn.net，作者：薛定喵君，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jsxg2009/article/details/115244519
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）