Nested routes and redirects

As shown in the figure below, routing nesting means that there are sub-pages inside the page. Click Install or Basic to pop up a page with its internal details.

---

three steps

Step ① Create the required page

Here I create two new ones, one for installation and one for basic interface.

Step ② Introduce on the corresponding page

The introduction is using children:[]this array. It should be noted that the path is no longer added in front /. If it is added, it will become the root directory. If not, it will be in the subdirectory of the directory you set.

{
    
    
    path: '/zhinan',
    component: () => import('../views/ZhiNan.vue'),
    redirect: "/zhinan/anzhuang",
    children:[
      {
    
    
        path: 'anzhuang',
        component:() => import("../views/Anzhaung.vue")
      },
      {
    
    
        path: 'base',
        component: () => import("../views/Base.vue")
      },
    ]
  },

Step ③ In the interface of writing to the parent level

I hung this under the directory anzhuang and wrote an exit below.

<template>
    <div>
        <h3>指南界面</h3>
        <div style="float:left; width:100px; height:100px">
            <router-link to="/zhinan/anzhuang">安装</router-link> 
            <br>
            <router-link to="/zhinan/base">基础</router-link>
        </div>
        <router-view></router-view>
    </div>

</template>

Summarize

There are only three steps to hang up the route: 1. Write the page 2. Register the routing address in index.js 3. Hang up the route