Vue-router nested Routines by detailed

A nested routine is a multi-layered nesting of routes, as the name implies.

Combined with vue-router imitation Tmall bottom navigation bar, add nested routines, also called sub-routes, to component me.

Add a total of two sub-routes, named Collection.vue (My Favorites) and Trace.vue (My footprints)

1, refactoring router/index.js routing configuration, need to use the children array to define the sub-route, as follows:

Import vue from ' Vue ' import Router from ' vue-router ' import Home from ' @/home ' to ' import Brand from ' @/brand ' import Member From ' @/member ' import Cart from ' @/cart ' import Me from ' @/me ' import Collection from ' @/collection ' import Trace from ' @/trace ' Import default from ' @/default ' Vue.use (Router) export default new Router ({//mode: ' History ',//base: __ DirName,//linkactiveclass: ' Active ',//change the active state of the class value routes: [{path: '/', Name: ' Home ', com Ponent:home}, {path: '/brand ', Name: ' Brand ', Component:brand}, {path: '/mem  ber ', Name: ' Member ', component:member}, {path: '/cart ', Name: ' Cart ', component: Cart}, {path: '/me ', Name: ' Me ', component:me, children: [{path: '
          Collection ', Name: ' Collection ', component:collection}, {path: ' Trace ',
Name: ' Trace ',          Component:trace}]}) 

Nested paths beginning with "/" are treated as root paths, so no "/" is added to the sub-route;

When generating a route, the path on the primary route is automatically added to the sub-route, so path on the child route does not have to re-declare the path on the primary route. 2, Me.vue code is as follows:

<template> <div class= "Me" > <div class= "tabs" > <ul> <!--<router-link:to = "{name: ' Default '}" Tag= "li" exact> defaults </router-link>--> <router-link:to= "{name: ' Collection '}" t
      Ag= "Li" > My favorites </router-link> <router-link:to= "{name: ' Trace '}" tag= "Li" > My Footsteps </router-link> </ul> </div> <div class= "Content" > <router-view></router-view> </di v> </div> </template> <script type= "text/ecmascript-6" > </script> <style lang= "less" rel = "Stylesheet/less" type= "text/less" scoped> me{. tabs{& > UL, & > Ul > li {marg
        in:0;
        padding:0;
      List-style:none;
        } & > Ul{Display:flex;
        Border-bottom: #cccccc solid 1px;
          & > Li{flex:1;
          Text-align:center;
          padding:10px; &.router-link-active {color: #D0021B; }}}} </style>

Page effect:

When accessing to http://localhost:8080/#/me, the component me <router-view> did not render anything because it did not match the appropriate sub-route. If you need to render some default content, you need to add an empty Zi Lu in children:

{
      path: ',
      name: ' Default ',
      component:default
},

The effect of the browser at this time: Default component defaults are rendered

You can see that the same class name is used between the different components, and the style is set to interact with each other, all we need to add the scoped property to the style label within the component

<style lang= "Less" rel= "stylesheet/less" type= "text/less" scoped>

This article refer to the Technology Fat blog Vue-router official website