Example of Vue routing listening to dynamically load the same page

Scenario Analysis

In the system, one module has three sub-modules. In the business data, the three sub-modules can be directly distinguished according to the type. Usually, we write in the same module and then select the business type. However, the owner requires that this be split into three menus. Users can choose the module they need to use according to their needs.

These three menus use the same data table. So we must only write one list, add, and edit page. Then determine which category it belongs to based on the route of entering the page. And jump to the add, edit, and call the corresponding list interface page of the specified category

Development

Since the three modules use the same page, three routes need to be configured and the pages need to be distinguished. The problem we are facing now is that although the three menus have different routes, they are the same page. When switching menus, the hook function of Vue will not be triggered. Then the data queried by the three list pages is the same, which means that the query method will not be triggered, resulting in the inability to switch conditions.

Then I searched the Internet for watch monitoring time. I found that I can trigger the list data loading method when the route changes by monitoring. The specific code is as follows

The routes of the list pages are added with 1, 2, and 3 after the list to distinguish which page it is.

watch:
    '$route.path': function (newVal, oldVal) {
        // Parameters of new and old routing path type are three types of menus defined globally this.type = newVal.substr(newVal.lastIndexOf("/") + 1);
        this.search();
    }
},

Then when you switch routes, you can re-pull the list data. At the same time, the create method also needs to call search. Because the route monitoring only works on this page. It will not be triggered when other pages switch routes to this menu.

created () {
    let path = this.$route.path;
    this.type = path.substr(path.lastIndexOf("/") + 1);
    this.search();
},

Summarize

In actual development, you can choose the monitoring attributes according to your needs

watch:{  
    //Monitor route changes $route( to , from ){   
       console.log( to , from )
        // to , from represent where to jump to respectively, both are objects // to.path (represents the address of the route to jump to);
     }
}

The above is the details of the example of Vue routing listening to achieve dynamic loading of the same page. For more information about Vue routing listening to achieve dynamic loading of the same page, please pay attention to other related articles on 123WORDPRESS.COM!