//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>