vue-router的命名路由
2023-06-10 本文已影响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>
<span>
<router-link :to="{name:'user',params:{id:1}}">user1</router-link>
</span>
<span>
<router-link :to="{name:'user',params:{id:2}}">user2</router-link>
</span>
<router-view></router-view>
</div>
</div>
<script src="./vue/vue.js"></script>
<script src="./vue/vue-router.js"></script>
<script>
/**
为了更加方便的表示路由的路径，可以给一个路由规则起一个别名，即“命名路由”
const router = new VueRouter({
routes:[
{
path:"/user/:id",
name:"user",
component:user
}
]
});
<router-link :to="{naem:"user",params:{id:123}}">user</router-link>
router.push({name:"user",params:{id:123}})
*/
const user = {
props:["id","uname","age"],
template:"<div>user{{id}}组件</div>"
};
const router = new VueRouter({
routes:[
{
path:"/",
redirect:"/user/"
},
{
name:"user",
path:"/user/:id",
component:user,
props:route => ({uname:"zs",age:12,id:route.params.id})
}
]
});
const vm = new Vue({
el:"#app",
router:router
});
</script>
</body>
</html>
