Vue Crawl Pit Tour-nested routines the first sub-route is selected by default, and both the primary and sub-routes are active

In the actual development, nested routines from often used, the basic usage is very simple, today is not to say how to use the nested routines, but in the process of using the two points found in the processing of small details. nested routines are selected by default in the first Zi Lu by the

In one such interface, the bottom of the five tab should obviously be five routes, and now on the home page this route has three tab, then the Three tab should be implemented with sub-route, the routing code is as follows:

        {
            path: ' Home ',
            name: ' Component:home ',
            children: [
                {
                    path: ' Dynamic ',
                    name: ' Dynamic ',
                    component:dynamic
                },
                {
                    path: ' Trade ',
                    Name: ' Trade ',
                    Component:hometrade
                },
                {
                    path: ' Info ',
                    name: ' Name ',
                    component:info
                }
            ]
        },

In this case, the route is there, click the tab can also be a corresponding switch, but generally we need to click on the bottom of the first page of the tab to let Zi Lu by default and load the data, in order to enter the page let the first sub-route is selected, you can add a redirect to the main route properties, Point the path to the appropriate sub-route.

        {
            path: '/* ',
            name: ' Home ',
            //redirect
            redirect: '/home/dynamic ',
            component:home,
            Children: [
                ......
            ]
        },

make primary and sub-routes checked simultaneously

Router-link as a routed jump tag in Vue, it has a checked state, and when it is in the current route, it gives Router-link a router-active-class, which is the class of the selected state, with an exact property. When the exact attribute is added to the exact match, that is, the URL is exactly matched, so if the exact attribute is set to the main route, the URL will not match the primary route when it is in a sub-route, and the primary route will not be selected. So the solution is not to set the exact property on the router-link of the main route and the sub-route, the problem can be solved.

<template> <div id = "Hometabs" class = "Flex Hometabs" > <router-link
        to = "/home/dynamic" class = "tab" tag = "div" active-class = "active" > <div> news </div>
            </router-link> <router-link to = "/home/trade" class = "tab" tag = "div" active-class = "Active" > <div> Best Deals </div> </router-link> <router-link to = "/home/info" class = "tab" Tag = "div" active-class = "Active" > <div> information </div> </router-link> </div>
; </template>