Question

在我的主页面中，我有点击required的下拉列表，点击链接v-show=show，我想在更改路线时设置@click = "show=!show"。请告诉我如何实现这一点。

Answer 1

在您的组件的$route上设置watcher，如下所示：

watch:{
    $route (to, from){
        this.show = false;
    }
}

观察路线变化，更改时将show设为假

Answer 2

如果您使用的是v2.2.0，则还有一个选项可用于检测$ routes中的更改。

要对同一组件中的params更改做出反应，您只需观察$ route对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

或者，使用2.2中引入的beforeRouteUpdate防护：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

参考：https://router.vuejs.org/en/essentials/dynamic-matching.html

Answer 3

以防万一有人在打字稿中寻找操作方法的解决方法

   @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: any) {
      // Some action
    }

Answer 4

上面的回答是更好的，但是只是为了完整性，当您处于组件中时，可以使用以下命令访问VueRouter内部的历史对象： this。$ router.history。这意味着我们可以通过以下方式收听更改：

this.$router.listen((newLocation) =>{console.log(newLocation);})

我认为这与this。$ router.currentRoute.path一起使用时主要有用您可以查看我在谈论放置debugger

代码中的说明，然后开始使用Chrome DevTools Console。

Answer 5

带有深层选项的Watcher对我不起作用。

相反，我使用 updated（）生命周期挂钩，该挂钩在每次组件数据更改时都会执行。就像使用 mount（）一样使用它。

sed '/^[^0-9]/ x; N; { s/\n/ / }; n' file

供参考，请访问documentation。

Answer 6

打字稿用户的另一种解决方案：

import Vue from "vue";
import Component from "vue-class-component";

@Component({
  beforeRouteLeave(to, from, next) {
    // incase if you want to access `this`
    // const self = this as any;
    next();
  }
})

export default class ComponentName extends Vue {}

Vuejs：路线变更事件

6 个答案: