32 children属性实现路由嵌套.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>router的基本使用</title>
    <script src="./js/vue-2.5.21.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        window.onload = function () {

            // 1. 定义 (路由) 组件。
            // 可以从其他文件 import 进来
            const Foo = { template: '<div>foo</div>' }
            const Bar = { template: '<div>bar</div>' }
            const index = { template: '#parentTem'}

            // 2. 定义路由
            // 每个路由应该映射一个组件。 其中"component" 可以是
            // 通过 Vue.extend() 创建的组件构造器，
            // 或者，只是一个组件配置对象。
            const routes = [
                {path:'/',redirect:'/index'},
                { 
                 path: '/index',
                 component:index,
                 children:[
                     {path:'foo',component:Foo},
                     {path:'bar',component:Bar}
                 ] 
                },
            ]

            // 3. 创建 router 实例，然后传 `routes` 配置
            // 你还可以传别的配置参数, 不过先这么简单着吧。
            const routerObj = new VueRouter({
                routes // (缩写) 相当于 routes: routes
            })

            var vm = new Vue({
                el: "#app",
                router: routerObj
            });
        }
    </script>
</head>

<body>
    <div id="app">
        <h1>Hello App!</h1>
        <!-- 这是顶层parentTem路由视图出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <template id="parentTem">
        <div>
            <div>This is default index page</div>
            <p>
                <router-link to="/index/foo" tag="button">Go to Foo</router-link>
                <router-link to="/index/bar" tag="button">Go to Bar</router-link>
                <router-view></router-view>
            </p>
        </div>
    </template>
</body>

</html>