vue路由刷新不影响地址

(官方推荐)使用provide / inject组合控制的显示

vue官方说明中允许一个祖先组件通过设置provide/inject向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide/inject 是解决组件之间的通信问题的利器,不受层级结构的限制。
修改app.vue
<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </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>
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载(通过isRouterAlive的值来控制)。然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用**this.reload()**来调用就行。
注入依赖
export default {
  inject:['reload'],  //注入依赖
  name: "CompanyConfigure",
  data() {
    return {... ...
在依赖中调用
this.reload();

特别强调:使用reload方法时刷新页面可能会使作用域中的其他代码不会执行,所以尽量单独使用reload方法,或将其他全局的代码放在reload方法中一起调用。

上一篇:vue中使用provide实现reload()


下一篇:The connection to the server localhost:8080 was refused - did you specify the right host or port?