SOURCE

console 命令行工具 X clear

                    
>
console
//1.定义(路由)组件
const User = {
	template:'<div>User {{ $route.params.id }}</div>'
}

// 2.创建路由实例,传入 'routes' 参数
const router = new VueRouter({
	routes:[
		{path:'/user/:id',component:User}
	]
})

//3.创建和挂载根实例,并注入路由参数
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'>
	<h3>动态渲染路由匹配</h3>
	<router-link to='/user/1'>/user/1</router-link>
	<router-link to='/user/2'>/user/2</router-link>
	<!-- 路由出口 -->
	<!-- 路由匹配将渲染在这里 -->
	<router-view></router-view>
</div>