router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'import routes from '../router.config.js'Vue.use(Router)const createRoute = (routes) => {// 数组的reduce方法，累加得出路由信息return routes.reduce((processedRoutes, currentRoute) => {processedRoutes.push(processRouteObj(currentRoute))return processedRoutes}, [])
}const processRouteObj = ({menuCode,breadcrumb,children,component,keepAlive,...args
}) => {return Object.assign({ // Object.assign()合并后返回新的路由对象// 路由元信息，配合全局守卫钩子实现页面的路由访问控制meta: {menuCode,keepAlive},// 路由解耦传参props: {breadcrumbObj: {content: breadcrumb,menuCode: menuCode}},// 此路由下对应的组件component: () => import(`@/pages/${component}`),// 子路由children: children ? createRoute(children) : []}, args)
}const router = new Router({mode: 'history',base: process.env.BASE_URL,routes: createRoute(routes)
})
// 全局前置守卫，实现路由的拦截与放行
router.beforeEach(async (to, form, next) => {const {userInfo: {code}} = store.state// 防止死循环跳出if (to.path.indexOf('error') > -1) {next()return}// console.log('totototototototo', to)if (code.includes(`${process.env.VUE_APP_CONTEXT}_${to.meta.menuCode}`)) {next()} else if (to.meta.menuCode) {// 真实菜单，但无权限next({path: '/error/403'})} else {// 不属于系统的url，跳转到404页面next({path: '/error/404'})}
})export default router

router.config.js


export default [{name: 'xxxx',path: '/xxx',menuCode: 'xxx',component: 'xxx/index'}
]

veu项目中的路由处理相关推荐

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
搭建SPA项目SPA项目中使用路由嵌套路由
目录一.vue-cli建立SPA项目 1.1 安装vue-cli 1.2 命令构建SPA项目 1.3 导入编码器 1.4 SPA项目运行访问过程二.SPA项目使用路由 2.1 定义组件 2.2 定 ...
Vue项目中使用路由导航守卫处理页面的访问权限
参考Vue-Router官方文档 Vue-Router导航守卫效果展示 1.给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性 { // 小智同学name: 'user-chat',p ...
vue项目中解决路由重复点击报错问题
router.js中写入 import导入代码下面加入const prototypePush = VueRouter.prototype.pushVueRouter.prototype.push = ...
vue项目中跳转页面，页面从顶部开始
vue项目中采用路由机制,当页面进行跳转,滚轮的位置不会改变 mounted() {//设置滚动条指定document.documentElement.scrollTop=0},
新窗口打开vue项目中的静态pdf文件，并做权限控制
问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 "项目地址/operate.pdf "此地址,会展示pdf文件. 描述:点击系统内的一个按钮会打开新窗口展示系统 ...
25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
React-router 5.0项目中统一动态设置路由页面Title
React项目中想在不同的路由页面都有自己的独立title,并且统一设置. 可以在每个路由页面的 componentDidMount() 钩子回调中 document.title = 'title' ...
Vue-cli项目中路由的基础用法，以及路由嵌套
文件目录: 编辑router文件夹下的index.js文件 · 第一步:引用vue和vue-router ,Vue.use(VueRouter) /* eslint-disable*/ import ...

veu项目中的路由处理

router/index.js

router.config.js

veu项目中的路由处理相关推荐

最新文章

热门文章