遇到需要切换页面显示,重新请求接口但是前端路由不变时的一种处理方法

项目基于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)
}

# 参考资料

Vue-router切换不同参数的共用路由问题？ 响应路由参数的变化

# java # html # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue