Scenario analysis

A module has three submodules in the system. In business data, the three submodules can be directly distinguished according to their types. Normally, we write in the same module and then we choose the business type. But the client requested that this be divided into three menus. Users choose the modules to use according to their own requirements.

The three menus use the same data table. So we’ll definitely just write a list, Add, Edit page. Then determine which category you belong to based on the route you took to the page. And jump to the corresponding list interface page for adding, editing, and calling the specified category

The development of

Because all three modules use the same page. Therefore, you need to configure three routes. And make page distinctions. And now the problem is. Because the three menus are the same page despite different routes, switching menus does not trigger the hook function of VUE. The three list pages then query for the same data. That is, no query method is triggered. Conditions cannot be switched.

Then I searched the Internet for the monitoring time of Watch. The list data loading method is triggered when it is found that route changes can be implemented by listening. The specific code is as follows

The route of the list page adds 1,2, and 3 respectively after the list to distinguish which page it is

watch: {
    '$route.path': function (newVal, oldVal) {
        Path type is a globally defined menu of three types
        this.type = newVal.substr(newVal.lastIndexOf("/") + 1);
        this.search(); }},Copy the code

This then allows you to re-pull the list data when switching routes. The create method also needs to call search, because the route listener only works on this page. Switching routes to this menu for other pages is not triggered.

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

conclusion

In real development, you can choose the listening properties according to your needs


watch: {// Listen for route changes
    $route( to , from) {console.log( to , from )
        // To and from, respectively, are the same object
        // to.path (represents the address of the route to jump to);}}Copy the code