Parameter changes from watch listening routes in vue
A programming route is written in a component, triggered through interaction
this.$({
name: "Result",
query: {
// Send search terms to result title: ,
},In the routing component that receives parameters, within the watch
watch: {
// Monitor search terms changes "$": {
immediate: true,
handler() {
();
},
},
},This enables direct monitoring of the parameters transmitted
If you use data to receive parameters, it will be invalid in data
data() {
return {
searchVal:this.$,
}
}
watch: {
// Monitor search terms changes searchVal: {
immediate: true,
deep: true,
handler() {
("a");
();
},
},
},In-depth monitoring is also invalid
How vue-router responds to changes in routing parameters (watch listening | navigation guard)
What is the change of routing parameters
When using routing parameters, for example, from/user/fooNavigate to/user/bar, the original component instance will be reused. Because both routes render the same component, reuse is more efficient than destroying and recreating. However, this also means that the component's lifecycle hook will no longer be called.
Methods to monitor routing parameter changes (watch listening | navigation guard)
Method one watch monitor
watch: { // The first way to write watch$route (to, from) {
(to)
(from)
}
},
watch: { // The second way to write watch$route: {
handler (to, from){
(to)
(from)
},
// In-depth observation and monitoringdeep: true
}
},
watch: { // The third way to write watch'$route':'getPath'
},
methods: {
getPath(to, from){
(this.$);
}
},
----------------------------------------------------------------
Give an example：
watch: {
// Method 1 // Listen to whether the route changes'$route' (to, from) {
if( !== ){
= ;
();//Reload the data}
}
}
//Method 2 Set the processing function when path changeswatch: {
'$route': {
handler: 'init',
immediate: true
}
In order to achieve such an effect,router-viewAdd a differentkey，This way even common components，if onlyurlChanges，This component will definitely be recreated。
<router-view :key="$"></router-view>Method 2: Navigation Guard
beforeRouteEnter (to, from, next) {
('beforeRouteEnter is called: called before rendering the corresponding route of the component is confirmed')
// Called before rendering the corresponding route of the component is confirmed// No! able! Get component instance `this` because the component instance has not been created before the guard is executed// You can access the component instance by passing a callback to next. When the navigation is confirmed, the callback is executed and the component instance is used as a parameter to the callback method.next(vm => {
// Access component instances through `vm`(vm)
})
},
// beforeRouteEnter is the only guard that supports passing callbacks to next.// For beforeRouteUpdate and beforeRouteLeave, this is already available, so passing callbacks is not supported because it is not necessary.beforeRouteUpdate (to, from, next) {
// Called when the current route changes but the component is reused// For example, for a path with dynamic parameters /foo/:id, when jumping between /foo/1 and /foo/2,// Since the same Foo component is rendered, component instances are reused. And this hook will be called in this case.// Component instances can be accessed `this`('beforeRouteUpdate is called: when the current route changes, but the component is reused')
next()
},
beforeRouteLeave (to, from, next) {
// Called when navigation leaves the corresponding route of this component// Component instances can be accessed `this`const answer = ('Whether to confirm leaving the current page')
if (answer) {
('beforeRouteLeave is called: called when navigation leaves the corresponding route of the component')
next()
} else {
next(false)
}
},This is the article about the parameters changes from the watch monitoring route in vue. This is the end. For more related contents of vue watch monitoring routes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!