SOURCE

<div id="app">
    <router-link to='/view1'>Go to view 1</router-link>
    <router-link to='/view2'>Go to view 2</router-link>
    <hr>
    <!-- 路由出口 -->
    <router-view></router-view>
</div>

<template id="view1">
    <div>
        <h2>This is view 1</h2>
        <p>hhahahaha</p>
        <router-link to='/view1/child'>子路由⤵️</router-link>
        <hr>
        <!-- 路由出口 -->
        <router-view></router-view>
    </div>
</template>
<template id="view2">
    <div>
        <h2>This is view 2</h2>
        <p>wuwuwuwuwu</p>
    </div>
</template>

<script>
    // 组件1
    const view1 = {
        template: '#view1'
    }
    // 组件2
    const view2 = {
        template: '#view2'
    }

    // 配置路由和对应组件
    const routes = [
        { path: '/view1', component: view1,
            children: [
                {
                    path: 'child',
                    component: {
                        template: `
                            <h3>I'm Child route</h3>
                        `
                    }
                },
                { path: '/', redirect: 'child' }
            ],
            name: 'view1'
        },
        { path: '/view2', component: view2 },
        { path: '/', redirect: '/view1' }
    ]

    // 创建router实例 传入routes配置
    const router = new VueRouter({
        routes
    })

    // 创建Vue实例并挂载 传入router实例
    const app = new Vue({
        router
    }).$mount('#app')
</script>