路由嵌套

页面结构

<body>
    <div id="app">
        <!-- 路由渲染组件 -->
        <router-view></router-view>

        <!-- 跳转路由 -->
        <router-link to="/user">会员中心</router-link>
        <router-link to="/user/address">会员中心下面的收货地址</router-link>

        <br />
    </div>
</body>

<script src="./vue.min.js"></script>
<!--要引入路由组件-->
<script src="./vue-router.js"></script>

逻辑结构

const User = {
    template:`
        <div>
            <h1>会员中心页面</h1>
            <router-view></router-view>
        </div>
    `
}

const Address = {
    template: `<h1>子路由收货地址页面</h1>`
}

//创建路由对象
const router = new VueRouter({
    routes: [
        {
            path: '/user',
            component: User,
            children: [
                {
                    path:'address',
                    component:Address
                }
            ]
        }
    ]
})

//在全局中加载路由
var app = new Vue({
    el:'#app',
    router
})