在我的主页上，我有下拉菜单，显示v-show=通过点击链接@click = "show=!当我改变路由时，我想设置show=false。请告诉我如何实现这件事。
当前回答
使用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
其他回答
有深度选项的观察者对我没用。
相反，我使用updated()生命周期钩子，每当组件的数据发生变化时执行该钩子。 就像使用mounted()一样使用它。
mounted() {
/* to be executed when mounted */
},
updated() {
console.log(this.$route)
}
请参阅文档以供参考。
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 {}
import {useRouter} from vue-router;
useRouter();
路由器。afterEach((to, from) => {});
在组件的$route上设置一个监控器，如下所示:
watch:{
$route (to, from){
this.show = false;
}
}
它观察路由变化，当路由变化时，将show设置为false
使用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
