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


当前回答

更新

如@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控制台。

其他回答

使用Vue3和合成API你可以做到

<script setup lang="ts">
import { watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

// do a `console.log(route)` to see route attributes (fullPath, hash, params, path...)
watch(
  () => route.fullPath,
  async () => {
    console.log("route fullPath updated", route.fullPath);
  }
);
</script>

参考资料和示例:https://router.vuejs.org/guide/advanced/composition-api.html#vue-router-and-the-composition-api

typescript用户的另一个解决方案:

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 {}

如果您正在使用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

import {useRouter} from vue-router;

useRouter();

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

更新

如@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控制台。