Vue Router 嵌套路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router_3.0.2.js"></script>
    <style>
        li{
            list-style: none;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box{
            border: 10px solid red;
        }
        .ulli li{
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid blue;
            margin-right: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-link to="/user">User</router-link>
        <router-link to="/regis">Regis</router-link>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script>
        const User = {
            template:'<h1>User 组件</h1>'
        }
        const Regis = {
            template:`
                <div>
                    <h1>Regis 组件</h1>
                    <hr/>
                    <!-- 子路由链接 -->
                    <router-link to="/regis/tab1">tab1</router-link>
                    <router-link to="/regis/tab2">tab2</router-link>
                    <!-- 子路由占位符 -->
                    <router-view></router-view>
                </div>

            `
        }
        const Tab1 = {
            template:'<h3>tab1 子组件</h3>'
        }
        const Tab2 = {
            template:'<h3>tab2 子组件</h3>'
        }
        //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes:[
                {path:'/',redirect:'/user'},
                {path:'/user',component:User},
                {
                    path:'/regis',
                    component:Regis,
                    // children数组表示子路由规则
                    children:[
                       {path:'/regis/tab1',component:Tab1}, 
                       {path:'/regis/tab2',component:Tab2} 

                    ]
                }
            ]
        })
        // 主页组件
        var vm = new Vue({
            el:'#app',
            data:{

            },
            router:router,//可简写 router
            // 私有组件注册
            components:{
                
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

相关阅读:
每日练习------使用Java实现输出如下图形。(三角形,空心菱形等)
爬虫 day 04 selenium滚动和常见反爬
python字典
Java基础之ArrayList集合（最简单最详细）
就知道你喜欢中文版：Spread .NET 15.2 FOR WPF
文章预览安防监控/视频存储/视频汇聚平台EasyCVR播放优化小tips
Scala入门到精通(尚硅谷学习笔记)章节八——面向对象
Spring Boot获取节假日API
【银河麒麟系统】备份还原工具显示“备份分区空间不足，请删除过期或者不需要的备份”解决方法
2024年孝感市建筑类中级职称申报资料私企VS国企

原文地址：https://blog.csdn.net/weixin_45723025/article/details/125405632