On my main page I have dropdowns that show v-show=show
by clicking on the link @click = "show=!show"
and I want to set show=false
when I change the route. Please advise me on how to realize this thing.
10 Answers
Setup a watcher on the $route
in your component like this:
watch:{
$route (to, from){
this.show = false;
}
}
This observes for route changes and when changed ,sets show
to false
-
15And use
$route: function(to, from) {
if you want to support older browsers, and aren't using babel. Mar 16, 2018 at 12:21 -
but how can I react immediately to route params or query params if the component is getting instantiated / initialised at first? Would I do it in created() or mounted() or beforeRouteUpdate lifecycle hook or where?– Marc_LFeb 25, 2020 at 18:58
-
3
-
1This helped me: stackoverflow.com/questions/40404787/… <router-view :key="$route.fullPath"></router-view> Nov 30, 2020 at 20:04
-
Excelent, i needed this to update my toolbar between sections May 22, 2021 at 21:54
If you are using v2.2.0 then there is one more option available to detect changes in $routes.
To react to params changes in the same component, you can watch the $route object:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}
Or, use the beforeRouteUpdate guard introduced in 2.2:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
Reference: https://router.vuejs.org/en/essentials/dynamic-matching.html
-
11A note:
beforeRouteUpdate
works only on the view that declares the method and not on any child component Sep 16, 2018 at 7:34 -
Just in case anyone is looking for how to do it in Typescript, here is the solution:
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: Route) {
// Some action
}
And yes as mentioned by @Coops below, please do not forget to include :
import { Watch } from 'vue-property-decorator';
Edit: Alcalyn made a very good point of using Route type instead of using any:
import { Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
-
3Don't forget to include in the import:
import { Prop, Watch } from "vue-property-decorator";
– CoopsAug 13, 2019 at 16:13 -
1I took me hours to finally realize that, any documentation out there?– AyyashJan 10, 2020 at 11:07
-
1Similar doc I can find: router.vuejs.org/api/#the-route-object Also instead of using the
any
type, you may want to use the interfaceRoute
fromimport { Route } from 'vue-router';
– AlcalynJan 21, 2020 at 14:04
Watcher with the deep option didn't work for me.
Instead, I use updated() lifecycle hook which gets executed everytime the component's data changes. Just use it like you do with mounted().
mounted() {
/* to be executed when mounted */
},
updated() {
console.log(this.$route)
}
For your reference, visit the documentation.
UPDATE
As stated by @CHANist, router.listen
no longer works, I don't know from which version it stopped working, but the good news (as also stated by @CHANist) is we can use:
this.$router.history.listen((newLocation) => {console.log(newLocation);})
OLD Response
The above responses are the better, but just for completeness, when you are in a component you can access the history object inside the VueRouter with: this.$router.history. That means we can listen to changes with:
this.$router.listen((newLocation) => {console.log(newLocation);})
I think this is mainly useful when used along with this.$router.currentRoute.path
You can check what I am talking about placing a debugger
instruction in your code and begin playing with the Chrome DevTools Console.
-
downvoted because I get error this.$router.listen is not a function Nov 3, 2020 at 12:42
-
@AngJobsonGithub Hi, from where are you calling this, this.$router will only be accessible on a Vue component, are you calling it from somewhere else? such as fetch()?– MelardevNov 4, 2020 at 13:07
-
I think the call was inside a vue file, this.$router is available but not the
listen
function. Nov 6, 2020 at 5:38 -
@AngJobsonGithub It has to be called from within a Vue component, "this" should be a Vue Component and the project should be using VueRouter– MelardevNov 6, 2020 at 7:49
-
1The code mentioned above seems does not work in Vue 2.6.11. The code need to change to the following
this.$router.history.listen((newLocation) =>{console.log(newLocation);})
in order to make it work. Thanks for the answer.– CHANistApr 5, 2021 at 7:25
import { useRouter } from "vue-router";
const router = useRouter();
router.afterEach((to, from) => { });
Using Vue3 and the composition API you can do
<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>
References and examples here: https://router.vuejs.org/guide/advanced/composition-api.html#vue-router-and-the-composition-api
Another solution for typescript user:
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 {}
-
Thanks! this is what I'm looking for. Route leave event for a specific component. Jan 18, 2022 at 5:06
using Vue Router is an alternative way, use the beforeRouteLeave after methods in your component like this:
<template>
<button @click="ShowMethod">DisplayButton</button>
</template>
<script>
data() {
return { show: true };
},
methods: {
ShowMethod() {
this.show = false;
}
},
beforeRouteLeave(to, from, next) {
this.show = false;
next();
}
</script>
according to VueJs documentation, it's called Navigation Guards check the link below:
The leave guard is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling
In-Component Guards:
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
beforeRouteLeave(to, from, next) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
}
look at the below link for more information:
you can use the beforeEach
event which allows any function to occur when the route is changing, just don't forget to call the next()
function to proceed next operation, basically it has the same job as the backend expressJS middleWare.
router.beforeEach((to, from, next) => {
store.commit('setError', null); //in this example on each route I'm removing the error noted from the old route
document.title = `${to.meta.title} | HartWork`; //on each route I'm adding a prefix to document title.
next(); //calling next to proceed next functions and operations
})