当vue中 点击两个菜单 共用一个页面 传递一个参数进行区分时
配置路由

{
  child_name: "添加(部门)",
   id: "3-2",
   path: "/officeSystem/database/add",
   query: { openstatusId: 1 }, // 此参数为区分页面的参数
   class: "el-icon-plus",
 },
{
    child_name: "添加(公共)",
    id: "3-5",
    path: "/officeSystem/database/add",
    query: { openstatusId: 0 },   // 此参数为区分页面的参数
    class: "el-icon-plus",
  },

点击不同菜单后 发现 页面不进行刷新 :
原因是 vue 对页面的加载进行了优化 两个页面使用同一路由
它会认为你 没有更改页面 从而不进行刷新
解决办法: 在根路由占位符处 加上唯一的key值 这样会强制页面刷新

<el-main style="height: 100vh; overflow: auto">
   <router-view :key="key"></router-view>
</el-main>

在父组件里面写 计算属性 确保 key值是唯一的

computed: {
    key() {
      return this.$route.fullPath;
    },
  },

解释一下: this.$route.fullPath 是在路由栈中 选取 全路径路由 因为你配置的路由路径 都是唯一的 所以把它赋值给key 那么key也就是唯一的,并且每一次点击菜单跳转页面 fullPath 都是动态获取到当前页面的路由路径

Logo

前往低代码交流专区

更多推荐