SOURCE

//1.定义路由组件
const Emperor = {
  template: `
    <div>
      <h2>皇上的 {{ $route.params.id }}(后宫)</h2>
      <router-view></router-view>
    </div>
  `
}

const Harem = { template:'<div>这是后宫</div>' };
const Queen = { template:'<div>这是后宫中的皇后</div>' };
const Highestranking = { template:'<div>这是后宫中的贵妃</div>' };

//2.创建路由实例，并传入 ‘routes'参数
const router = new VueRouter({
	routes:[
		{ path:'/emperor/:id',component:Emperor,
			children:[
				// 当 /harem/:id匹配成功
				// queen 会被渲染在 emoeror 的<router-view></router-view>
				{path:'',component:Harem},
				
				// 当	/emperor/:id/queen匹配成功
				// queen 会被渲染在 emoeror 的<router-view></router-view>
				{path:'queen',component:Queen},
				
				// 当	/emperor/:id/highest-ranking匹配成功
				// highest-ranking 会被渲染在 emoeror 的<router-view></router-view>
				{path:'highest-ranking',component:Highestranking}
			]
		}
	]
})

//3.创建和挂载根实例，注入路由参数
const app = new Vue({
	// el:'#app',
	//通过 router 配置参数注入路由
	router
}).$mount('#app')
// const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<div id="app">
	<!--通过 router-link 组件导航-->
  <!--通过 `to` 属性指定链接-->
	<router-link to='/emperor/harem'>/皇帝/后宫</router-link><br/>
	<router-link to='/emperor/harem/queen'>/皇帝/后宫/皇后</router-link><br/>
	<router-link to='/emperor/harem/highest-ranking'>/皇帝/后宫/贵妃</router-link><br/>
	<!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
</div>