vue-router的进阶学习——vue路由的封装和配置

第一步：

1.在vue项目里 src/router/ 文件夹下

新建 config.js 文件，写入如下代码：

const base = '/'
const routers = [{name: '用户管理',child: [{name: '用户管理列表',url: '/user/index'}]},{name: '商品管理',child: [{name: '商品列表',url: '/product/index'},{name: '商品库存编辑记录',url: '/product/inventoryRecord'},{name: '预制卡列表',url: '/product/prefaCard'},{name: '预制卡兑换码',url: '/product/prefaCardConversionCode'},{name: '预制卡核销记录管理',url: '/product/prefaCardVerification'},{name: '自组礼盒设置',url: '/product/selfGiftBox'}]},{name: '贺卡管理',child: [{name: '贺卡列表',url: '/greeting/index'}]},{name: '订单管理',child: [{name: '订单列表',url: '/order/index'}]},{name: '优惠',child: [{name: '优惠项目设置',url: '/favourable/project'},{name: 'B端折扣活动管理',url: '/favourable/active'},{name: 'C端折扣活动管理',url: '/favourable/Cactive'}]},{name: '礼物记录',child: [{name: '礼物记录列表',url: '/gift/index'}]},{name: '设置',child: [{name: '帮助中心',url: '/setting/help'},{name: '设置',url: '/setting/set'},{name: '小程序分享卡片设置',url: '/setting/share'},{name: '数据字典',url: '/setting/book'},{name: '企业定制',child: [{name: '企业定制礼盒',url: '/setting/gift'},{name: '知情同意书',url: '/setting/agreement'},{name: '企业定制规则',url: '/setting/rule'}]},{name: '首页图片设置',url: '/setting/picture'},{name: '白名单设置',url: '/setting/whiteList'},{name: '礼品卡使用说明设置',url: '/setting/useExplain'}]},{name: '营销活动管理',child: [{name: '抽奖活动管理',url: '/marketing/manage'},{name: '拆红包活动管理',url: '/marketing/redPackage'},{name: '红包活动规则',url: '/marketing/rule'}]}
]export { routers, base }

第二步：

1.在vue项目里 src/router/ 文件夹下

修改 index.js 文件，写入如下代码：

import Vue from 'vue'
import Router from 'vue-router'
import { routers, base } from './config'Vue.use(Router)let route = []
routers.map(v => {v.child.map(k => {if (k.url) {return route.push({path: `${base}admin${k.url}`,component: () => import(`../pages${k.url}.vue`)})}if (k.child) {k.child.map(j => {route.push({path: `${base}admin${j.url}`,component: () => import(`../pages${j.url}.vue`)})})}})
})let adminRoute = [{path: `${base}login`,component: () => import('../pages/login/index.vue')},{path: `${base}admin`,component: () => import('../pages/admin.vue'),children: route}
]export default new Router({mode: 'history',routes: adminRoute
})

vue-router的进阶学习——vue路由的封装和配置相关推荐

vue router返回到指定的路由
vue router返回到指定的路由一.项目场景二.问题描述三.原因分析四.解决方案一.项目场景项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) ...
Vue源码 Vue Router（三）matcher 路由匹配器
Vue源码 Vue Router(三)matcher Vue源码 Vue Router(三)matcher matcher createMatcher addRoutes match 总结单步调试参 ...
Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
vue router连续点击多次路由报错根本原因和解决方法
原因: vue-router 升级到 3.1.x 后,重复点击导航时,控制台出现报错 ,vue router ≥ v3.1 后 ,回调形式改成 promise api 了,返回的是 promise,如 ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
vue router 跳转php,vue路由：路由跳转后怎么知道切换到那个router-view中
应用场景首浏围开幸,业来很广例量站标闪择以近览着发次尝试用vue 2.x重构传统页面.使用vue init webpack xxx 创建项目友持都发很秀框事,应编差里互是过是来本商理类了如则处果.展 ...
vue router连续点击多次路由报错
在编程式导航跳转时候,连续点击多次会报NavigationDuplicated错误 this.$router.push({name: "search"}); 出现这种错误原因是因为 ...
vue脚手架vue数据交互_学习Vue：3分钟的交互式Vue JS教程
vue脚手架vue数据交互 Vue.js is a JavaScript library for building user interfaces. Last year, it started to ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...

vue-router的进阶学习——vue路由的封装和配置

vue-router的进阶学习——vue路由的封装和配置相关推荐

最新文章

热门文章