vue动态路由,三级及以上路由,地址跳转,但是页面不显示
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue动态路由的时候,一级,二级路由都正常展示,但是三级,四级,五级等就只看到地址跳转了,但是页面并没有跳转,原因是共用了一个<router-view></router-view>
import Layout from '@/layout'
import Vue from 'vue'
import Router from 'vue-router'
import db from '@/utils/localstorage'
import {
Shortcuts
} from 'tinymce'
Vue.use(Router)
const usermenuList = db.get("usermenuList");
let list = [];
console.log(usermenuList);
if (usermenuList.length != undefined) {
usermenuList.forEach(function(item, index) {
if (item.parentId == 0) { //一级
item.component = Layout;
if (item.children) {//二级
item.children.forEach(function(item1, index1) {
if (item1.children) { //三级
item1.component = {render(c) { return c('router-view')}}
item1.children.forEach(function(item2, index2) {
if (item2.children) { //四级
item2.component = {render(c) { return c('router-view')}}
item2.children.forEach(function(item3, index3) {
if (item3.url) {
item3.component = (resolve) => require([`@/views${item3.url}.vue`], resolve);
}
});
} else {
if (item2.url) {
item2.component = (resolve) => require([`@/views${item2.url}.vue`], resolve);
}
}
});
} else {
if (item1.url) {
item1.component = (resolve) => require([`@/views${item1.url}.vue`], resolve);
}
}
});
}
}
list.push(item);
});
}
export default {
section: [
...list
],
}
这种循环希望大家使用递归
GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)