针对框架以外的页面路由配置教程

一.找到项目中的 routes.js

// 学生注册页面路由

const AoYuStudentRegister = [{
   
  path: '/MarketAoYuStudentRegister',
  name: '学生信息填写',
  component: _import('system/AoYuStudentRegister')
}]

path: ‘/MarketAoYuStudentRegister’: 表示当用户访问 /MarketAoYuStudentRegister 路径时，会匹配到这个路由配置。
name: ‘学生信息填写’: 给这个路由起了一个名字，可以在代码中或者页面跳转时使用该名称。
component: _import(‘system/AoYuStudentRegister’): 指定了该路由对应的组件。当用户访问 /MarketAoYuStudentRegister 路径时，会加载 system/AoYuStudentRegister 组件显示在页面上。

// 注册成功路由
const success = [{
   
  path: '/success',
  name: '学生信息填写',
  component: _import('system/success')
}]

// 暂未开启注册路由
const StudentError = [{
   
  path: '/StudentError',
  name: '学生信息填写',
  component: _import('system/error/StudentError')
}]

//导出路由配置 这样别的地方就能访问这个路径

export const frameInRoutes = frameIn
export const frameOutRoutes = frameOut

export default [
   ...AoYuStudentRegister,
  ...success,
  ...StudentError]

二.找到项目中的路由守卫

Vue Router提供了三种类型的路由守卫
全局前置守卫（Global Before Guards）
路由独享前置守卫（Per-Route Before Guards）
组件内的守卫（In-Component Guards）

这里我们使用的是 全局前置守卫 因为针对框架以外的页面路由要跳过 登录 token 和后端验证 所以要在之前完成页面部署

 router.beforeEach(async (to, from, next) => {
   
  	// to: 表示即将要进入的目标路由对象。
 	// from: 表示当前导航正要离开的路由对象。
 	// next: 是一个必须调用的方法，它能控制接下来的导航行为。你可以调用 next() 来直接进行导航，也可以传递一个路由路径作为参数，以进行重定向。
  // 这里我们先配置白名单 
  const whiteList = ['/login', '/MarketAoYuStudentRegister', '/success','/StudentError']
  // 验证当前路由所有的匹配中是否需要有登录验证的
  // 这里暂时将cookie里是否存有token作为验证是否登录的条件
  // 请根据自身业务需要修改
  const token = util.cookies.get('token')
  if (token && token !== 'undefined') {
   
  		//这里可以写 有登录状态 token位置，我就不展示了，因为这次是不需要登录状态的
  		...   	
  } else {
   
  	// 我们在这里写 没有登录状态可以访问的 页面 以及 功能
     // 在免登录白名单，直接进入 不要任何验证
     
    if (whiteList.indexOf(to.path) !== -1) {
   
     // to.path 是路由守卫提供的方法，可以获取到浏览器 网址输入的路由 如果刚才配置的白名单里面的某一项就走到这里
         
      next()
    } else {
   
       // 没有白名单的时候跳转到登录界面
   		//这里解释一下 任何没有配置routes.js 的 ，也就是找不到路由的都默认跳转到登录