vue 导航菜单重新加载刷新页面
知识库项目点击导航菜单栏上点击子菜单刷新页面的需求应用vue在当前页面内路由参数发生变化,怎么进行页面刷新。传统方式window.location.reload(); 整个页面进行刷新,会出现白屏,体验不好this.$router.go(0); 同上,体验不友好推荐方法使用provide / inject组合方式原理:允许一个祖先组件向其子孙后代注入一个依赖,不论组件层次有...
·
知识库项目点击导航菜单栏上点击子菜单刷新页面的需求
应用
vue在当前页面内路由参数发生变化,怎么进行页面刷新。
传统方式
window.location.reload(); 整个页面进行刷新,会出现白屏,体验不好
this.$router.go(0); 同上,体验不友好
推荐方法
使用provide / inject组合方式
原理:允许一个祖先组件向其子孙后代注入一个依赖,不论组件层次有多深,在起上下游关系成立的时间内始终生效。
provide: 一个对象或者返回一个对象函数
inject: 一个字符串数组,或者一个对象,对象的key是本地的绑定名
修改路由分发的部分
// 在app.vue或者具体项目中路由分发的地方引入v-if="isRouterAlive"
<template>
<div id="app">
<transition name="fade" mode="out-in">
<router-view v-if="isRouterAlive"></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
// 点击页面侧边栏重载功能的实现(该处提供了提供给后代组件的数据/方法)
provide() {
return{
reload: this.reload
}
},
data() {
return{
isRouterAlive: true
}
},
methods: {
//页面重新载入函数
reload () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true
})
}
},
}
</script>
在侧边菜单栏的代码部分添加下面的代码
// 注意该部分的handleselect方法
<el-menu :default-active="$route.path" class="el-menu-vertical-demo"
@select="handleselect" unique-opened router v-show="!collapsed" >
</el-menu>
export default {
inject: ['reload'], // 注入重载的功能(注入依赖)
//监视
watch: {
//检测路由参数发生改变时,刷新当前页面 调用
'$route': function(){
// this.reload();
}
},
methods: {
handleselect: function (a, b) {
this.reload() // 点击侧边栏重新载入页面
},
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)