Question

我正在使用参数，当我使用this.$router.push()推入参数时，它可以工作。

routes: {
  path: ':stepId?',
  name: 'stepper'
}

但是，我也正在观察组件内部的$ route，以便捕捉参数更改的值（As described in the docs）：

watch: {
  $route: {
    handler: function(to, from) {
      const newStepId = (to.params && to.params.stepId) || this.steps[0].id;
      const initial = !from;
      if (initial || newStepId !== from.params.stepId) {
        this.goToStep(newStepId, initial);
      }
    },
    immediate: true
  }
}

但是，当我使用后退按钮时，to内路线的watch: $route部分没有任何参数，只有路径或手表没有甚至都没跑。

Answer 1

我遇到了同样的问题，对我有用的是在created（）方法中添加$ watch。

  created() {
    this.$watch("$route",() => { 
    // this.$route.query is watched now as expected
   }, 
   { immediate: true });
  }

对于我为什么还是不知道为什么还是要装上它还是不起作用

Answer 2

以编程方式导航时（即使用this.$router.push()），您必须自己提供包括params在内的选项作为params属性：

let options={
  params:{ 
     stepId:'myStepIdValue'
  },
  name: 'stepper'
}
this.$router.push(options);

docs的例子很清楚。

不使用后退按钮更新Vue-router参数

2 个答案: