Vue使用IView ui组件库导航栏菜单做嵌套路由跳转，可以通过声明式和编程式路由两种方式
- 声明式路由的跳转
<template>
<div>
<Menu :theme="theme2" >
<MenuGroup title="使用">
<MenuItem
v-for="(item,index) in siderMenuData"
:key="index"
:to="item.name"
:name="item.name"
><Icon :type="item.icon" />{{ item.title }}</MenuItem
>
</MenuGroup>
</Menu>
</div>
</template
<script>
data() {
return {
siderMenuData: [
{
name: "ArticleManage", //此处的name用来路由跳转
icon: "md-document",
title: "文章管理",
},
{
name: "CommentManage",
icon: "md-chatbubbles",
title: "评论管理",
},
{
name: "ReportManage",
icon: "md-heart",
title: "举报管理",
},
],}
}
通过to 中的name跳转
</script>
- 编程式路由的跳转
<template>
<div>
<Menu :theme="theme2" @on-select="onClickChangeMenu" width="200px" height="100%">
<MenuGroup title="使用">
<MenuItem
v-for="(item,index) in siderMenuData"
:key="index"
:name="item.name"
><Icon :type="item.icon" />{{ item.title }}</MenuItem
>
</MenuGroup>
</Menu>
</div>
</template
<script>
data() {
return {
siderMenuData: [
{
name: "ArticleManage", //此处的name用来路由跳转
icon: "md-document",
title: "文章管理",
},
{
name: "CommentManage",
icon: "md-chatbubbles",
title: "评论管理",
},
{
name: "ReportManage",
icon: "md-heart",
title: "举报管理",
},
],},
methods:{
//通过点击事件触发name值，使路由跳转
onClickChangeMenu(name) {
//this.$router.push(name);
// this.$router.push(name) 这个是 this.$router.push({ path: name }) 的简写 这个是通过 路由里面的path值跳转的
//this.$router.push({ name: name }) 这个是通过name跳转的
this.$router.push({ name: name })
},
}
}
</script>
