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

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

应用
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()  // 点击侧边栏重新载入页面
        },
    }
}  

 

  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值