// index.js router.beforeEach(async (to, from, next) => { try { // get user login info const _userInfo = await API.get('/common/query/menu', {}, false) router.app.$store.dispatch('setLoginUser', _userInfo) if (_userInfo && Object.keys(_userInfo).length > 0 && to.matched.some(record => record.meta.requireAuth)) { if (_userInfo.admin) { // super admin can pass next() } else if (to.fullPath === '/label/system-setting/theme' && !_userInfo.topicAdmin) { if (_userInfo.dataServiceAdmin) { next({ path: '/label/system-setting/api' }) } else { next({ path: '/label' }) } } else if (!(_userInfo[to.meta.authRole])) { next({ path: '/label' }) } } } catch (e) { router.app.$message.error('获取用户登陆信息失败！') } next() })
二、简介1、路由简介
路由是干什么的？
根据不同的 url 地址展示不同的内容或页面。
单页面应用最大的特点就是只有一个 web 页面。因而所有的页面跳转都需要通过javascript实现。当需要根据用户操作展示不同的页面时，我们就需要根据访问路径使用js控制页面展示内容。
2、React-router 简介
React Router 是专为 React 设计的路由解决方案。它利用HTML5 的history API，来操作浏览器的 session history (会话历史)。
3、使用
React Router被拆分成四个包：react-router，react-router-dom，react-router-native和react-router-config。react-router提供核心的路由组件与函数。react-router-config用来配置静态路由（还在开发中），其余两个则提供了运行环境（浏览器与react-native）所需的特定组件。
进行网站（将会运行在浏览器环境中）构建，我们应当安装react-router-dom。因为react-router-dom已经暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。
4、相关组件
4-1、
使用了 HTML5 的 history API (pushState, replaceState and the popstate event) 用于保证你的地址栏信息与界面保持一致。
主要属性:
basename：设置根路径
getUserConfirmation：获取用户确认的函数
forceRefresh：是否刷新整个页面
keyLength：location.key的长度
children：子节点（单个）
4-2、
为旧版本浏览器开发的组件，通常简易使用BrowserRouter。
4-3、
为项目提供声明性的、可访问的导航
主要属性:
to：可以是一个字符串表示目标路径，也可以是一个对象，包含四个属性：
pathname:表示指向的目标路径
search: 传递的搜索参数
hash:路径的hash值
state: 地址状态
replace：是否替换整个历史栈
innerRef：访问部件的底层引用
同时支持所有a标签的属性例如className，title等等
4-4、
React-router 中最重要的组件，最主要的职责就是根据匹配的路径渲染指定的组件
主要属性:
path：需要匹配的路径
component：需要渲染的组件
render：渲染组件的函数
children ：渲染组件的函数，常用在path无法匹配时呈现的'空'状态即所谓的默认显示状态
4-5、
重定向组件
主要属性: to:指向的路径
<Switch>
嵌套组件：唯一的渲染匹配路径的第一个子 <Route> 或者 <Redirect>
三、react-router-config之路由鉴权引言
在之前的版本中，React Router 也提供了类似的 onEnter 钩子，但在 React Router 4.0 版本中，取消了这个方法。React Router 4.0 采用了声明式的组件，路由即组件，要实现路由守卫功能，就得我们自己去写了。
1、react-router-config 是一个帮助我们配置静态路由的小助手。其源码就是一个高阶函数 利用一个map函数生成静态路由
import React from "react"; import Switch from "react-router/Switch"; import Route from "react-router/Route"; const renderRoutes = (routes, extraProps = {}, switchProps = {}) => routes ? ( <Switch {...switchProps}> {routes.map((route, i) => ( <Route key={route.key || i} path={route.path} exact={route.exact} strict={route.strict} render={props => ( <route.component {...props} {...extraProps} route={route} /> )} /> ))} </Switch> ) : null; export default renderRoutes;
//router.js 假设这是我们设置的路由数组（这种写法和vue很相似是不是?)
const routes = [ { path: 'https://www.jb51.net/', exact: true, component: Home, }, { path: '/login', component: Login, }, { path: '/user', component: User, }, { path: '*', component: NotFound } ]
//app.js 那么我们在app.js里这么使用就能帮我生成静态的路由了