nuxt 设置路由的meta属性,nuxt 怎么设置路由的meta,nuxt 怎么设置router的meta

nuxt 官网说的专注于UI的渲染,作者想试一下用来写后台管理的界面感觉何如,可以开启 spa模式,或者不改变,也会有不一样的体验哦.
基于nuxt.js的管理后台项目,一个项目部署,可以一站式管理数据库和你的业务的增删改查操作,项目暂未完善,待完善后开源于github

一个问题,想了好多种办法,终于用了一个笨方法解决了这个问题

如下所示:

routes.js 如下:

/*** nuxt的路由菜单配置* @description 仅仅只用于侧边栏的菜单显示和权限,其它的不做任何功能*/
const menus = [{meta: {requireAuth: false, //菜单权限title: '系统首页', //菜单名icon: 'fa fa-bar-chart', //菜单图标},path: "/dashboard",name: "dashboard",},{meta: {requireAuth: false, //菜单权限title: '欢迎页', //菜单名},path: "Welcome",name: "dashboard-Welcome"},{meta: {requireAuth: false, //菜单权限title: '示例功能', //菜单名icon: 'fa fa-bar-chart', //菜单图标},path: "/demos",name: "demos",},{meta: {requireAuth: false, //菜单权限title: '列表Demo', //菜单名},path: "List",name: "demos-List"},{meta: {requireAuth: false, //菜单权限title: '列表详情', //菜单名},path: "List/Detail/:id?",name: "demos-List-Detail-id"},{meta: {requireAuth: false, //菜单权限title: '数据分析', //菜单名icon: 'fa fa-bar-chart', //菜单图标},path: "/datas/UserAnalysis",name: "datas-UserAnalysis"},{path: "/",name: "index"}
];/*** 递归查询路由权限* @param {*} list* @param {*} menu*/
const iterator = (list) => {for (let item in list) {for (const m in menus) {if ((list[item].name === menus[m].name) && (list[item].path === menus[m].path)) {console.log((list[item].name === menus[m].name) && (list[item].path === menus[m].path));list[item].meta = menus[m].meta;list[item].meta.requireAuth = true;}}if (list[item].children && list[item].children.length > 0) {iterator(list[item].children);} else {return list;};}
};export default (routes, resolve) => {routes = iterator(routes);console.log(routes);
};

然后设置nuxt.config.js

nuxt.config.js 如下配置:

router: { //中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。middleware: ['authorities'],extendRoutes: routes},

这个问题暂时得到了解决,可以根据routes生成标签导航/侧边栏菜单/面包屑导航等:

nuxt 设置路由的meta属性,nuxt 怎么设置路由的meta,nuxt 怎么设置router的meta相关推荐

获取和设置消息队列的属性msgctl，删除消息队列
消息队列的属性保存在系统维护的数据结构msqid_ds中,用户可以通过函数msgctl获取或设置消息队列的属性. int msgctl(int msqid, int cmd, struct msqid ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
nuxt 全局css_解决nuxt 自定义全局方法,全局属性,全局变量的问题
注意 ,这个在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客 ...
html头部meta属性大全——各种奇葩属性设置大归类
常用通用属性: <meta name="viewport" content="width=device-width, initial-scale=1, maximu ...
使用meta属性禁用手机浏览器的缩放功能
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能.这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看 ...
html的meta总结，html标签中meta属性使用介绍和动态替换字符串
http://www.haorooms.com/post/html_meta_ds http://www.haorooms.com/archives里面的东西比较多,需要细看一下 http://www ...
移动端UC /QQ 浏览器的部分私有Meta 属性
<meta name="format-detection" content ="telephone=no"/> 格式检测禁止识别我们页面中的数 ...
ZeroMQ接口函数之：zmq_setsockopt –设置ZMQ socket的属性
Name zmq_setsockopt –设置ZMQ socket的属性 Synopsis int zmq_setsockopt (void *socket, int option_name, con ...
Django中的form如何设置field的html属性呢？
在Django中无论何种field,都有一个widget的属性: 1 class Field(object): 2 widget = TextInput # Default widget to use ...
[读码时间] css函数设置读取对象的属性
说明:代码取自网络,注释为笔者学习时添加! <!DOCTYPE html> <html> <head><meta charset="utf-8&qu ...

nuxt 设置路由的meta属性,nuxt 怎么设置路由的meta,nuxt 怎么设置router的meta

nuxt 设置路由的meta属性,nuxt 怎么设置路由的meta,nuxt 怎么设置router的meta相关推荐

最新文章

热门文章