Vue-router 检测路由的变化

Vue-router 检测路由的变化

问题

vue模块第一次router-link加载完毕了，再次router-link的时候希望向着这也页面传参，接收参数不知道从那接受，网上有很多，我用的是检测路由的变化。
当前url和点击router-link一样，但是参数不一样，地址栏中的地址已经改变了，然而并没有跳转路由

起因

组件已打开，再次跳转，是复用之前的组件，并不会出发之前的钩子函数。
点击侧边栏的文章，却没有跳转页面。虽然地址栏的地址变化了，但实际上只有参数发生了改变（从/topic/a变化到/topic/b），这样的话原来的组件实例会被复用，组件的生命周期钩子不会再被调用。因为渲染的是同一个组件，比起销毁再创建，复用更高效。

解决

方法一 ：用 watch 选项检测 $route 变化

methods: {
    getArticleData() {
        this.$axios(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`)
            .then((res) => {
                this.post = res.data.data
                this.loading = false
            }, (error) => {
                console.log(error)
            })
    }
},
watch: {
 *1.监听，当路由发生变化的时候执行*
    $route(to, from) {
    	console.log(to.path);
        this.getArticleData()
    }，
 *2.监听，当路由发生变化的时候执行*
    $route: {
    	handler: function(val, oldVal){
        console.log(val);
     },
     // 深度观察监听
     deep: true
  }，
 *3.监听,当路由发生变化的时候执行*
		watch: {
		  '$route':'getPath'
		},
		methods: {
		  getPath(){
		    console.log(this.$route.path);
		  }
      }，
}

当路由变化时，就会触发getArticleData方法。post数据重新赋值了，页面改变了。

方法二 ：用key是来阻止“复用”的。

Vue 提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)

<router-view :key="key"></router-view>
 
computed: {
  key() {
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  }
}

使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。

方法三 ：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave。

<script>
  // 引入 Tabbar组件
  import mTabbar from './components/Tabbar'
  import mTabbarItem from './components/TabbarItem'
  // 引入 vuex 的两个方法
  import {mapGetters, mapActions} from 'vuex'
 
  export default {
    name: 'app',
    // 计算属性
    computed:mapGetters([
      // 从 getters 中获取值
      'tabbarShow'
    ]),
    // 监听,当路由发生变化的时候执行
    watch:{
      $route(to,from){
        if(to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' || to.path == '/Time' || to.path == '/Mine'){
          /**
           * $store来自Store对象
           * dispatch 向 actions 发起请求
           */
          this.$store.dispatch('showTabBar');
        }else{
          this.$store.dispatch('hideTabBar');
        }
      }
    },
    beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当钩子执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    },
    components:{
      mTabbar,
      mTabbarItem
    },
    data() {
      return {
        select:"Building"
      }
    }
  }
</script>