vue三级菜单渲染_vue实现多级菜单效果

本次记录基于iview3框架实现多级菜单+vue router实现页面切换

方法一：

使用Tree 树形控件，官方文档

以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/"，如果没有自己手动加或后端改，没有这个"/" 斜杠会导致路由跳转失败。

思路：根据官方文档里面写用on-select-change事件返回当前已选中的节点数组、当前项，就利用返回的当前项数据拿到URL，并使用router跳转。

import SubItem from './SubItemm.vue'

export default {

components:{

SubItem

},

data () {

return {

data1: [

{

title: 'parent 1',

expand: true,

url:null,

children: [

{

title: 'parent 1-1',

url:null,

children: [

{

title: 'leaf 1-1-1',

url:'/chpo/chpo/chpoShow'

},

{

title: 'leaf 1-1-2',

url:'/chpo/chpoCollection/chpocollectionshow'

}

]

},

{

title: 'parent 1-2',

url:null,

children: [

{

title: 'leaf 1-2-1',

url:'/company/course/courseshow'

},

{

title: 'leaf 1-2-1',

url:'/system/sysgamutgame/gamutgameshow'

}

]

}

]

}

]

}

}，

methods:{

selectChange(node,curr){

//node 当前已选中的节点数组

//curr 当前项,这里可是拿到当前项的数据，这样可以拿到跳转的URL

if(curr.url)

this.$router.push(curr.url)

}

}

}

路由配置，这里子路由中的路径要和后端给出的路由地址保持一致，才能正确跳转

import Vue from 'vue'

import Router from 'vue-router'

import component1 from '@/components/component1'

import component2 from '@/components/component2'

import component3 from '@/components/component3'

import component4 from '@/components/component4'

import Index from '../view/Index'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name:'Index',

component: Index,

children:[

{

path: '/chpo/chpo/chpoShow',

name:'component1',

component: component1

},

{

path: '/chpo/chpoCollection/chpocollectionshow',

name:'component2',

component: component2

},

{

path: '/company/course/courseshow',

name:'component3',

component: component3

},

{

path: '/system/sysgamutgame/gamutgameshow',

name:'component4',

component: component4

},

]

},

]

})

方法二：

使用Menu 导航菜单和递归来实现，组件官方文档

思路：①根据官方文档 MenuItem有 to和 target属性，使用其一都能实现跳转，但跳转结果可能不一样，这里使用to属性跳转

②在子组件内进行是否为最终子项，若不是则使用递归进行再次循环，直到最终子项

子组件

{{model.title}}

// v-if判断是否为最终的子项，如果是则进行MenuItem渲染，否则进行递归调用

{{item.title}}

//递归调用

export default {

name: "SubItem", //至关重要的一步，一定要写name，递归的时候使用

props:['model'],

}

在父组件中调用，使用v-for循环组件，传入当前item值即可，调用的代码已经在上面写过，不在赘述。

在MenuItem上绑定属性:to 跳转的router路径，即可实现页面切换。

最后截图展示效果：

方法一：使用tree树形组件效果

方法二：Menu组件和递归使用效果

至此，两种方法写完了，自己学习记录，仅供参考思路。

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。