关于vue中 点击不同菜单传递不同参数 进入同一个页面内 页面不刷新的问题
当vue中 点击两个菜单 共用一个页面 传递一个参数进行区分时配置路由{child_name: "添加(部门)",id: "3-2",path: "/officeSystem/database/add",query: { openstatusId: 1 }, // 此参数为区分页面的参数class: "el-icon-plus",},{child_name: "添加(公共)",id: "3-5",
·
当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 都是动态获取到当前页面的路由路径
更多推荐
已为社区贡献3条内容
所有评论(0)