Vuejs:路由改变事件

在我的主页上，我有下拉菜单，显示v-show=通过点击链接@click = "show=!当我改变路由时，我想设置show=false。请告诉我如何实现这件事。

当前回答

如果有人正在寻找如何在Typescript中做到这一点，这里是解决方案:

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

是的，正如下面@Coops提到的，请不要忘记包括:

import { Watch } from 'vue-property-decorator';

编辑: Alcalyn提出了一个很好的观点，使用Route type而不是any:

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

其他回答

在组件的$route上设置一个监控器，如下所示:

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

它观察路由变化，当路由变化时，将show设置为false

import {useRouter} from vue-router;

useRouter();

路由器。afterEach((to, from) => {});

如果有人正在寻找如何在Typescript中做到这一点，这里是解决方案:

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

是的，正如下面@Coops提到的，请不要忘记包括:

import { Watch } from 'vue-property-decorator';

编辑: Alcalyn提出了一个很好的观点，使用Route type而不是any:

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

如果您正在使用v2.2.0，那么还有一个可用的选项来检测$routes中的更改。

要对同一个组件中的参数变化做出反应，你可以观察$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

更新

如@CHANist所述，路由器。listen不再工作，我不知道从哪个版本开始停止工作，但好消息是(@CHANist也说过)我们可以使用:

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

旧的响应

上面的响应是更好的，但只是为了完整性，当你在一个组件中，你可以访问VueRouter内部的历史对象: router.history美元。这意味着我们可以通过:

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

我认为这个函数在和。$router.currentRoute.path一起使用时非常有用您可以检查我所说的关于放置调试器的内容

指令在你的代码，并开始玩Chrome DevTools控制台。

推荐文章