Vue routing the true way

The front - Wen Longgang 2022-11-24 22:18:04 阅读数:965

vueroutingtrueway

Scenario: When we are working on a project, we will encounter some requirements to judge certain values ​​​​by eliminating routing switching. The following introduces some commonly used monitoring methods

1. Monitoring through watch

// Method 1, monitor route $route changes General monitoringexport default{watch: {$route(to, from){console.log('route changed')console.log('Current page route:' + to.path);console.log('Last route:' + from);},}}// Method 2, monitor the route $route changes, use the handler function to monitor the route in depthexport default{watch: {'$route': { // $route can use quotes or not quotes Objects to monitorhandler(to, from){console.log('route changed')console.log('Current page route:' + to);console.log('Last route:' + from);},deep: true, // set to true for deep observation monitoringimmediate: true, // It can be monitored when the rendering is initialized for the first time}}}// Method 3, monitor the change of route $route, and trigger the method in methodsexport default{watch: {'$route': 'initData'},methods: {initData(){console.log('route changed')}}}// Method 4, monitor route path changesexport default{watch: {'$route.path'(toPath, fromPath){console.log('route changed')console.log('Current page routing address:' + toPath)console.log('The last routing address:' + fromPath)},}}// Method 5, monitor the path change of the route, use the handler functionexport default{watch: {'$route.path': {handler(toPath, fromPath){console.log('route changed')console.log('Current page routing address:' + toPath)console.log('The last routing address:' + fromPath)},deep: true, // deep monitoringimmediate: true, // It can be monitored when the rendering is initialized for the first time}}}// Method 6, monitor the path change of the route, and trigger the method in methodsexport default{watch: {'$route.path': 'initData'},methods: {initData(){console.log('route changed')}}}

2. Monitor through hook functions beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

export default{beforeRouteEnter(to, from, next){// Call this hook before rendering the component, so the component has not been created yet, so this cannot be obtainedconsole.log(this) // The result is: undefinedconsole.log('beforeRouteEnter')next()},beforeRouteUpdate(to, from, next){//This component is called when it is reused, such as routing jump with dynamic parameters: /add/11 jumps to /detail/12console.log(this) // can access thisconsole.log('beforeRouteUpdate')next()},beforeRouteLeave(to, from, next){// Called when the navigation leaves the current route, this can be accessedconsole.log(this) // can access thisconsole.log('beforeRouteLeave')next()},}

3. Global routing monitoring this.$router.beforeEach

// Method 1. Perform global routing monitoring in the create of App.vueexport default {name: 'App',created() {this.$router.beforeEach((to, from, next) => {console. log(to);console. log(from);next()})}}// Method 2, perform global routing monitoring in the routing file (/router/index.js)import Vue from 'vue'import Router from 'vue-router'Vue. use(Router)let routes = [{path: '/login',component: resolve => require(['@/views/login'], resolve),},]let router = new Router({mode: 'history', // remove # from urlscrollBehavior: () => ({ y: 0 }),base: process.env.VUE_APP_BASE_DOMAIN,routes,})router. beforeEach((to, from, next) => {console. log(to);console. log(from);next()})export {routesrouter}

版权声明:本文为[The front - Wen Longgang]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/328/202211242214141144.html