vue-router 动态路由匹配
2023-06-09 本文已影响0人
小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 >test</h1>
<div>
<router-link to="/user/1">user1</router-linnk>
<router-link to="/user/2">user2</router-linnk>
<router-link to="/user/3">user3</router-linnk>
</div>
<div>
<router-view></router-view>
</div>
</div>
<!--
动态匹配路由的基本用法
应用场景：通过动态路由参数的模式进行路由匹配
-->
<script src="./vue/vue.js"></script>
<script src="./vue/vue-router.js"></script>
<script >
const user = {
// 这里可以接受id数据
template:"<h1>{{$route.params.id}}子组件内容</h1>"
}
const router = new VueRouter({
routes:[
{
path:"/user/:id",//**********/
component:user
}
]
});
const vm = new Vue({
el:"#app",
router:router
});
</script>
</body>
</html>
