vue-router 路由小知识

1、主动刷新路由。

开发中有时候我们需要手动去刷新页面，实现页面数据的重载，用比较传统的window.reload(）和$router.go(0)这两个方法会使页面刷新，但会进入一段空白页，影响用户体验，我们可以使用provide/inject 这个小技巧。这样刷新页面也不会出现空白页。

app.vue
<template>
  <div id="app">
    <router-view v-if="isRouter"></router-view>
  </div>
</template>

<script>
  export default {
    provide(){
      return{
        reload:this.reload
      }
    },
    data() {
      return {
        isRouter:true
      }
    },
    methods:{
      reload(){
        this.isRouter = false;
        this.$nextTick(()=>{
          this.isRouter = true
        })
      }
    }
  }
</script>


test.vue

<template>
  <div class="test">
    <button @click="go">点击</button>
  </div>
</template>

<script>
  export default {
    inject:['reload'],//引入方法
    created() {
      var path = this.$route.path;
      console.log(path)
    },
    methods: { 
      go(){
        let id = this.$route.query.id;
        if(id == 2){
           this.$router.push('/test?id='+1);
         }else{
           this.$router.push('/test?id='+2)
         }
        //路由跳转后主动刷新页面
        this.reload()；
      },
     
    }
  };
</script>

2、路由跳转数据没有刷新，原因同上。方法也很直接，直接watch监听路由的变化即可。(页面不会刷新)

<template>
  <div class="test">
    <button @click="go">点击</button>
  </div>
</template>

<script>
  export default {
    watch:{
       '$route':{
            handler:'text',//路由变化后需要执行的方法
        }
    },
    methods: {
      text(){
       let a = this.$route.query.id;
       console.log(a)
      },
      go(){
        let id = this.$route.query.id;
        if(id == 2){
           this.$router.push('/test?id='+1);
         }else{
           this.$router.push('/test?id='+2)
         }
      },
     
    }
  };
</script>

3，理由原因同上，觉得以上两种方法太麻烦？代码不够简洁?我们可以直接给router-view一个唯一的key，这样，只要路由一旦变化，那么组件就会重新渲染

<router-view :key="$route.fullPath"></router-view>