vue 路由参数变化，页面不刷新，provide /inject 完美解决方案

此方法使用的是v-if来控制router-view的显示或隐藏，v-if从false变为true时，vue会重新渲染router-view区域，所以当参数变化时，只需让v-if 从true => false => false,就能实现页面刷新;
问题描述
官网地址

路由
http://localhost:1221/newproduct?entityId=7B311104
点击div时，变为
http://localhost:1221/newproduct
页面不刷新
怎么办……

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

温馨提示,此方法适用vue 2.20+版本,请先查看你的vue版本
首先，找到自己的route-view

app.vue

<template>
  <div class="os_container">
    <navbar></navbar>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
export default {
  name:'mainframe',
  provide(){
    return {
      reload:this.reload
    }
  },
  data () {
    return {
      isRouterAlive:true,
    }
  },
  components:{
    navbar,
  },
  methods:{
    reload(){
      this.isRouterAlive = false
      //在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style scoped lang="stylus">
</style>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
 

<route-view>下显示的页面

切换语言的页面里

export default {
  name: 'newproduct',
  inject:['reload'],  //  // 接受App那边提供的方法
  method:{
    //点击div的时候，路由参数改变，
    //调用mainfirem.vue下的this.reload()方法，来改变v-if的状态
    clickDiv(){
      this.reload()
    }
  }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

可用在多语言的切换页面

<template>
  <div>
    <Dropdown trigger="click" @on-click="selectLang">
      <a href="javascript:void(0)">
        {{ title }}
        <Icon :size="18" type="md-arrow-dropdown" />
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: 'Language',
  inject: ['reload'], // 接受App那边提供的方法
  props: {
    lang: String
  },
  data () {
    return {
      langList: {
        'zh-CN': '语言',
        'zh-TW': '語言',
        'en-US': 'Lang',
        'ja-JP': '言語'
      },
      localList: {
        'zh-CN': '中文简体',
        'zh-TW': '中文繁体',
        'en-US': 'English',
        'ja-JP': '日语'
      }
    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
      this.reload() // 在触发切换语言后调用，相当于直接调用app里写的reload方法
    }
  },
  computed: {
    title () {
      return this.langList[this.lang]
    }
  },
  methods: {
    selectLang (name) {
      this.$emit('on-lang-change', name)
    }
  }
}
</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/113568885