为了让大家可以继续看下去,代码展示效果我先给出来
https://htmlzhoyan.github.io/ElementUi/#/ele/elc/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86
我这里要实现 Vue 2.0 的桌面端组件库Element中的侧边栏内容动态生成,换句话说,我并不知道侧边栏菜单里会有多少个子选项,所以我这样设计
目录结构如下:
vue布局
我这边使用了组件里面再次调用组件的方法。
所以 我这样先声明个组件 eleTemplate.vue
export default {
name: 'NavMenu',
props: ['navMenus'],
data() {
return {}
},
methods: {}
}
a{
text-decoration:none
}
然后我在父组件里调用它,这里我使用了router-view来展示子路由里的页面效果,同时我为了实现路由进来的时候去触发侧边栏的指向,我在el-menu里添加了default-active
:default-active="isId"
@select="handleSelect"
class="el-menu-vertical-demo"
background-color="#F0F6F6"
text-color="#3C3F41"
active-text-color="#f60">
import config from './config'
import NavMenu from './eleTemplate';
export default {
data() {
return{
totalList:[],
isId:"权限管理"
}
},
methods: {
handleSelect(key,keyPath){
console.log(key,keyPath)
}
},
components: {
NavMenu
},
beforeRouteEnter (to, from, next) {
console.log("我从哪里来",to.params.id,from)
var self = this
next(vm=>{
vm.isId = to.params.id
})
},
watch:{
$route(to,from){
this.isId = to.params.id
}
},
created(){
this.totalList = config.childs
},
}
其中 我为了模拟数据,引入config.js&#