需求描述：当前路由不变，参数改变，页面进行动态渲染
如：/users/1 -> /users/2 ，参数由1变为2，页面数据需要更新，但是一般情况下原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

先介绍用到的两个方法

• watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

官方例子：

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

上方列子中需要监听data中的question变量，所以在watch中写入对应的属性并添加回调函数。

vue中 watch的详解

• beforeRouteUpdate

  beforeRouteUpdate是路由更新时触发，从其他页面进入不会触发这个钩子函数，父路由下的子路由跳转以及当前路由参数变化时才会触发这个钩子函数。

beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }

该方法接收三个参数，to是跳转后的路由信息，from是跳转之前的路由信息，next是回调。

页面内容未更新

不含有需要更新的引用组件，需要更新的只是当前页面

这里上面的两种方法可以实现

• wactch
  由于我的dispatch是放在created钩子函数中，所以路由变化时，因为是同一个组件，直接就组件复用，created函数并不会重新调用，所以当前数据并没有变化。因此需要监听当前路由，如果路由参数变化，dispatch一个action，重新请求数据。

watch: {
    '$route' (to, from) {
      if (to.query && from.query && to.query.id !== from.query.id) {
        let id = Number(to.query.id);
        this.$store.dispatch('product/fetchProductDetail', { id });
      }
    }
  },

• beforeRouteUpdate

  beforeRouteUpdate的执行语法内容和watch基本一致，都是判断参数然后重新dispatch一个action，如果请求写在方法methods中则在这里调用函数来执行。

beforeRouteUpdate (to, from, next) {
    if (to.query && from.query && to.query.id !== from.query.id) {
      let id = Number(to.query.id);
      this.$store.dispatch('product/fetchProductDetail', { id });
    }
    next();
  },

页面内容组件未更新

在当前路由页面内，引用了其他组件


这里需要在ShowGoods这个组件中使用watch监听route的变化，使用 beforeRouteUpdate则不触发这个钩子函数。

watch: {
    '$route' (to, from) {
      if (to.query && from.query && to.query.id !== from.query.id) {
        let id = Number(to.query.id);
        this.$store.dispatch('product/fetchProductDetail', { id });
      }
    }
  },