Vue中的嵌套路由

news2025/11/4 21:58:57

router官网-嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
在这里插入图片描述

<body>
    <div id="app">
        <h1>欢迎使用路由导航</h1>
        <router-link to="/login">登陆组件</router-link>
        <router-link to="/main">主页组件</router-link>
        <router-view></router-view>
    </div>

    <template id="main">
        <div>
            <h2>主页组件中的导航菜单</h2>
            <p>
                <router-link to="/main/user">用户组件</router-link>
                <router-link to="/main/emp">员工组件</router-link>
                <router-link to="/main/dept">部门组件</router-link>
                <router-link to="/main/wel">欢迎页</router-link>
            </p>
            <!--嵌套路由出口-->
            <router-view></router-view>
        </div>
    </template>

<script>
    var main = {template: '#main'}
    var login = {template: '<div><h1>登陆界面</h1></div>'}
    var user = {template: '<div><h1>用户界面</h1></div>'}
    var emp = {template: '<div><h1>员工界面</h1></div>'}
    var dept = {template: '<div><h1>部门界面</h1></div>'}
    var welcom = {template: '<div><h1>欢迎</h1></div>'}
    var router = new VueRouter({
        mode: 'history',
        routes: [
            {path: '/login', component: login},
            //父路由，顶级路由
            {
                path: '/main',
                name: 'main',
                //设置欢迎页：配置一个重定向，并且重定向路径为嵌套路由中的欢迎页路径即可
                redirect:{name:'wel'},
                component: main,
                //嵌套子路由列表
                children: [
                    /**
                     * 嵌套子路由对象
                     * 1.绝对路径：以斜杠开头，此路径就是子路径的真实路径
                     *           用户组件对应的路径：/user
                     * 2.相对路径：不以斜杠开头，此路径的真实路径=父路径+子路径
                     *           用户组件对应的路径：/main/user
                     *
                     */
                    {path:'user', name:'user', component: user},
                    {path:'emp', name:'emp', component: emp},
                    {path:'dept', name:'dept', component: dept},
                    {path:'wel', name:'wel', component: welcom}
                ]
            }
        ]
    })
    new Vue({
        el: '#app',
        //在Vue对象中注册路由对象
        router
    })
</script>
</body>