Vue 第十一章路由嵌套

1、路由嵌套

 routes:[
            {
                path:'/account',
                component:account,
                children:[
                    {path: '/login',component: login},
                    {path: '/register',component: register},
                ]

            }

2、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->

    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>

</head>
<body>
<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>

<template id="tmp">
    <div>
        <h1>这是account组件</h1>
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    var account = {
        template:'#tmp'
    }

    var login = {
        template:'<h1>登陆</h1>'
    }

    var register = {
        template:'<h1>注册</h1>'
    }

    var router = new VueRouter({
        routes:[
            {
                path:'/account',
                component:account,
                children:[
                    {path: '/login',component: login},
                    {path: '/register',component: register},
                ]

            }
        ]
    })
    //2.创建一个vue实例
    var vm = new Vue({
        el: '#app',    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: {},
        methods:{},
        router
    });
</script>
</body>
</html>

Vue 第十一章 路由嵌套

Vue 第十一章路由嵌套