Vue路由嵌套

如果理解清楚了 <router-view>，<router-link>，component，name，:to="{...}"和 path的关系，那么路由嵌套就很容易理解了

    <div id="app"></div>

        Vue.use(VueRouter);
        
        var login = {
            template: `
              <div>
                
                这里是login界面 独占一行
                <router-view></router-view>
              </div>`
        }
        
        var register = {
            template: `
                <div>这里是register界面 独占一行register
                    <router-view></router-view>
                </div>
            `
        }
        
        var women = {
            template: `<div>这里是women入口</div>`
        }

        var man = {
            template: `<div>这里是man入口</div>`
        }
        

注意login、register中的 <router-view></router-view> 这个不能删除是组件装载的地方，用于装载women和man组件

        var router = new VueRouter({
            // 这里可以直接传 也可以不传
            // 4. 配置路由对象
            routes: [
                {
                    path: "/login", component: login,
                    children: [
                        { name: "login.women", path: "women", component: women },
                        { name: "login.man", path: "man", component: man }
                    ]

                },
                { path: "/rigister", component: register }
            ] //login 是一个组件对象
        });
        

注意

里面的 children:[...]，name的名字是可以随便写的，但建议写成有极高辨识度的名称，children中的path可以不写“/”，写“/”表示跳转到该路径下，不写“/”表示跳转到当前路径的子路径下。例如当前路径是“/login”，children中的path不写“/”则表示跳转到“/login/women”中去，否则是直接跳转到“/women”。
另外值得注意的地方是 path:"/login"，path的地址不能有空格，否则会出现莫名的字符串在地址栏

        var App = {
            template: `
                <div>
                    <router-link :to="{name:'login.women'}">login To Women</router-link>
                    <router-link :to="{name:'login.man'}">login To Man</router-link>
                    <router-view></router-view>
                </div>
            `
        }

        new Vue({
            el: '#app',

            router: router, // 将配置好的路由对象关联到vue实例中
            components: {
                app: App
            },
            template: `<app />`

        })

总结

路由嵌套：

通过routes数组创建路由对象，在路由对象中创建一个子路由数组children，子路由通过name来给router-link进行超链接的跳转，通过component来进行组件的引用。

        var router = new VueRouter({
            // 这里可以直接传 也可以不传
            // 4. 配置路由对象
            routes: [
                {
                    path: "/login", component: login,
                    children: [
                        { name: "login.women", path: "women", component: women },
                        { name: "login.man", path: "man", component: man }
                    ]

                },
                { path: "/rigister", component: register }
            ] //login 是一个组件对象
        });
        

创建需要嵌套入的组件，给component来进行组件的引用。

        var women = {
            template: `<div>这里是women入口</div>`
        }

        var man = {
            template: `<div>这里是man入口</div>`
        }

通过router-link来进行跳转

 <router-link :to="{name:'login.women'}">login To Women</router-link>
 <router-link :to="{name:'login.man'}">login To Man</router-link>

概括

App 中的router-view 用于填充 router 的路由内容组件
router中有两个路由组件，login和register，这两个组件里面还分别有一个router-view，这两个view又分别用于填充women和man组件，由此实现了路由嵌套

Kam on iBlog

vue_路由嵌套

Vue路由嵌套

注意

总结