vue 导航菜单重新加载刷新页面

2024-07-12 03:28| 来源: 网络整理| 查看: 265

知识库项目点击导航菜单栏上点击子菜单刷新页面的需求

应用 vue在当前页面内路由参数发生变化，怎么进行页面刷新。

传统方式 window.location.reload(); 整个页面进行刷新，会出现白屏，体验不好 this.$router.go(0); 同上，体验不友好

推荐方法使用provide / inject组合方式原理：允许一个祖先组件向其子孙后代注入一个依赖，不论组件层次有多深，在起上下游关系成立的时间内始终生效。

provide: 一个对象或者返回一个对象函数 inject: 一个字符串数组，或者一个对象，对象的key是本地的绑定名

修改路由分发的部分

// 在app.vue或者具体项目中路由分发的地方引入v-if="isRouterAlive" export default { name: 'app', // 点击页面侧边栏重载功能的实现（该处提供了提供给后代组件的数据/方法） provide() { return{ reload: this.reload } }, data() { return{ isRouterAlive: true } }, methods: { //页面重新载入函数 reload () { this.isRouterAlive = false; this.$nextTick(function () { this.isRouterAlive = true }) } }, }

在侧边菜单栏的代码部分添加下面的代码

// 注意该部分的handleselect方法 export default { inject: ['reload'], // 注入重载的功能（注入依赖） //监视 watch: { //检测路由参数发生改变时，刷新当前页面调用 '$route': function(){ // this.reload(); } }, methods: { handleselect: function (a, b) { this.reload() // 点击侧边栏重新载入页面 }, } }

【本文地址】

公司简介

联系我们