嵌套路由

src/pages/admin.vue

@@ -59,8 +59,8 @@ export default {
             // params
             console.log(1)
             // this.$router.push({path: '/params/123' })
-            this.$router.push({name:"params",params:{id:123,name:111,aaa:111}})
-            // this.$router.push("/")
+            // this.$router.push({name:"params",params:{id:123,name:111,aaa:111}})
+            this.$router.push("/sitteng/user")
         },
         replace(){
             // 不能回退 会替换当前路由 (当前路由被删除 用跳转之后的代替)

src/pages/sitteng.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="sitteng">
+        <div class="nav">
+            <button @click="navto('index')">到index</button>
+            <button @click="navto('user')">到user</button>
+            <button @click="navto('admin')">到admin</button>
+        </div>
+        <div class="box">
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+<style scoped>
+.sitteng{
+    width: 100%;
+    height: 100vh;
+    display: flex; 
+}
+.nav{
+    width: 15%;
+    height: 100%;
+    /* background-color: #0f0; */
+    border-right: 1px solid #bcbcbc;
+    display: flex;
+    flex-direction: column;
+}
+.nav > button {
+    width: 100%;
+}
+.box{
+    width: 85%;
+    height: 100%;
+    /* background: #f00; */
+}
+</style>
+<script>
+export default {
+    methods:{
+        navto(url){
+            this.$router.push(url)
+        }
+    }
+}
+</script>

src/router/index.js

@@ -14,6 +14,31 @@ const routes = [
             next()
         }, component: admin
     },
+    {
+        path:"/sitteng",
+        component: () => import("../pages/sitteng.vue"),
+        children:[
+            {
+                path:"index",
+                component: () => import("../views/index.vue"),
+                meta:123, beforeEnter: (to, from, next) => {
+                    // ...
+                    console.log("路由独享")
+                    next()
+                }
+
+            },
+            {
+                path: "user",
+                component: () => import("../views/user.vue")
+            },
+            {
+                path:"admin",
+                component: () => import("../pages/admin.vue")
+            }
+
+        ]
+    },
     { path: "/params",meta:"admin", name: "params", component: () => import("../pages/params.vue") } // ()=>import('') 按需加载 路由异步加载
 ]
 // path