第一章：路由

路由介绍

saiadmin使用的是vue.js的官方路由vue-router，路由非常重要，它是与Vue.js深度集成的。 当前系统路由分为静态路由和动态路由两种组成。

静态路由

• 静态路由，指的是已经提前在前端代码中定义好了，直接就可以使用和访问的路由
• 在当前系统中有两个文件可以定义静态路由
• 第一种是类似于 登录页 直接显示整体页面，位于src/router/webRoutes.js中

  {
    name: 'login',
    path: '/login',
    component: () => import('@/views/login.vue'),
    meta: { title: '登录' }
  },

• 第二种是类似于 仪表盘 是在页面框架的内容区域显示的，在src/router/homePageRoutes.js中

  {
    name: 'dashboard',
    path: '/dashboard',
    meta: {
      title: '仪表盘',
      icon: 'icon-dashboard',
      type: 'M', // M:菜单，I:iframe嵌入url，L：外链url
      affix: true
    },
    component: () => import('@/views/dashboard/index.vue')
  },

菜单类型 type

M：表示菜单，I：表示iframe嵌入url，L：表示外链url

关于第二种路由为什么会在页面框架内容区域展示，因为在src/router/webRoutes.js文件中我们将homePageRoutes作为Layout的children，这样在homePageRoutes中的路由全部作为 Layout 的子页面进行展示

import homePageRoutes from './homePageRoutes'
//系统路由
const routes = [
  {
    name: 'layout',
    path: '/',
    component: () => import('@/layout/index.vue'),
    redirect: 'dashboard',
    children: homePageRoutes
  },
  {
    name: 'login',
    path: '/login',
    component: () => import('@/views/login.vue'),
    meta: { title: '登录' }
  },
  {
    path: '/:pathMatch(.*)*',
    hidden: true,
    meta: { title: '访问的页面不存在' },
    component: () => import('@/layout/404.vue')
  }
]

动态路由

• 动态路由是系统在登录成功后，进行初始化，从后端拿到的路由配置
• 动态路由的配置，是在管理界面中 权限 =》 菜单管理 中配置的
• 不同角色的用户登录后，会拿到不同的路由配置，然后进行初始化，进行路由的动态加载
• 未经初始化注册的路由无法使用，这是通过权限控制菜单的基本思路

路由常见操作

要对路由进行操作，需要使用 useRoute 和 useRouter 进行操作

import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 直接输入要跳转的路由
router.push('/login')
// 指定路由的 name 跳转
router.push({ name: 'login' })
// 指定路由的 path 跳转
router.push({ path: '/login' })
// 带上参数跳转
router.push({ name: 'login', query: { id: 10 } })

// 获取当前页面的路由信息
onMounted(async()=>{
  //当前页面路由 path
  const path = route.path
  //当前页面路由 name
  const name = route.name
  //当前页面路由 参数
  const params = route.query
}

进阶：为什么有的路由可以直接访问，有的路由需要登录才能访问？

• 因为在系统设计中，我们用到了路由守卫功能，位于src/router/index.js 中，在路由前置守卫 beforeEach 中，我们会读取当前用户的登录 token 信息。
• 如果没有读取到，那么认为当前用户未登录，跳转到登录页面；
• 如果读取到用户登录 token 信息，则继续根据 token 交换获取用户信息，获取成功后，允许访问路由。

// 此处是路由白名单的位置，数组中存的是路由的name，只要在此处配置的路由，可以绕过登录检测
const whiteRoute = ['login']

......

  // 拿到用户token信息
  const token = tool.local.get(import.meta.env.VITE_APP_TOKEN_PREFIX)

  // 登录状态下
  if (token) {
    //如果访问的是登陆页面，则跳转到默认页面
    if (to.name === 'login') {
      next({ path: defaultRoutePath })
      return
    }
    // 如果用户信息为空，读取用户信息，否则跳转到访问页面
    if (! userStore.user && userStore.user == undefined ) {
      const data = await userStore.requestUserInfo()
      data && next({ path: to.path, query: to.query })
    } else {
      next()
    }
  } else {
    // 未登录的情况下允许访问的路由
    if (! whiteRoute.includes(to.name)) {
      next({ name: 'login', query: { redirect: to.fullPath } })
    } else {
      next()
    }
  }