Vue 使用IView ui组件库导航菜单做嵌套路由跳转,可以通过声明式和编程式路由两种方式

声明式路由的跳转

data() {
return { 
siderMenuData: [
        {
          name: "ArticleManage", //此处的name用来路由跳转
          icon: "md-document",
          title: "文章管理",
        },
        {
          name: "CommentManage",
          icon: "md-chatbubbles",
          title: "评论管理",
        },
        {
          name: "ReportManage",
          icon: "md-heart",
          title: "举报管理",
        },
      ],}
}
通过to 中的name跳转

编程式路由的跳转

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);
    },
}
}

你可能感兴趣的:(javascript,vue.js)