路由嵌套（二级路由）

作者: 小丘啦啦啦 | 来源:发表于2019-04-29 09:12 被阅读0次

12.Vue嵌套路由(三层)
路由嵌套（二级路由）
vue嵌套路由
vue嵌套路由与404重定向实现方法分析
vue中的路由
vue-routes 基础（一）
动态路由 & 嵌套路由实例
二、vue基础-路由（重要）
Vue嵌套路由和路由守卫
3.路由vue-router

使用路由规则的children属性实现子路由。
子路由规则的path属性不要以斜线/开头，这样会表示永远以此根路径开始请求，而不是拼接上级路由路径。（虽然也可以手动凭借上级路由路径，但是不推荐）

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 导入vue路由的包 -->
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id='app'>
            <router-link to="/account">Account组件</router-link>
            <router-view></router-view>
        </div>
        <template id="tmp1">
            <div>
                <h1>Account组件</h1>
                <!-- 为了使路由URL合理，前面还要加上上级路由的路径 -->
                <router-link to="/account/login">登陆</router-link>
                <!-- 子路由path前面带了斜线，直接以此进行请求，没有拼上上级路由路径，这种不推荐    -->
                <router-link to="/register">注册</router-link>   
                <router-view></router-view>
            </div>
        </template>
        <script>
            var account = {
                template:'#tmp1',
            }
            var login = {
                template:'<h1>登陆组件</h1>'
            }
            var register = {
                template:'<h1>注册组件</h1>'
            }
            var router = new VueRouter({
                routes : [   
                    {
                        path:'/account',   
                        component:account,
                        children:[   //子路由规则，这样才能使路由有上下级关系，展示不冲突
                            {
                                 //注意，子路由path前面不需要加斜线，表示路径会拼上上级路由的路径
                                path:'login',component:login  
                            },{
                                //如果path带上带上斜线，永远以根路径开始请求，哪怕属于上级路由也不拼上他的路径，这样不方便用户理解url地址（路由其那套）
                                path:'/register',component:register   
                            }
                        ]   
                    },
                    //login应该属于account的，这样写即为平级，会展示在同一个<router-view></router-view>中而不会嵌套
                    // {   
                    //  path:'/account/login',
                    //  component:login
                    // }
                ]
            });

            var vm = new Vue({
                el: "#app",
                data: {
                    
                },
                router   
            });
        </script>
    </body>
</html>