关于vue中的路由和路由器的相关

路由和路由器

路由（Route）：用于获取路由信息

import { useRoute } from 'vue-router' // useRoute  使用路由
const route = useRoute()

/*
 打印后得到
 1. path：表示当前路由的路径。
 
 2. params：一个对象，包含当前路由的动态参数。例如，如果路由定义为 /user/:id，并且当前路由为 /user/123，那么 params 对象将包含 { id: '123' }。

 3. query：一个对象，包含当前路由的查询参数。例如，如果当前路由为 /user?id=123&name=John，那么 query 对象将包含 { id: '123', name: 'John' }。

 4. hash：表示当前路由的哈希值（即URL中的 # 后面的部分）。

 5. fullPath：表示当前路由的完整路径，包括路径、查询参数和哈希值。

 6. matched：一个数组，包含当前路由匹配的所有路由记录。每个路由记录都是一个包含路由配置信息的对象。

 7. name：表示当前路由的名称（如果有）。

 8. meta：一个对象，包含当前路由的元数据。元数据可以在路由配置中定义，用于存储与路由相关的任意信息。
 */

路由器（Router）：用于操作路由信息

import { useRouter } from 'vue-router' // useRouter  使用路由器
const router = useRouter()
/*
  1. push(location: RawLocation)：导航到一个新的路由。location 参数可以是一个字符串路径，也可以是一个描述目标位置的对象。例    如，router.push('/about') 或 router.push({ path: '/about' })。

  2. replace(location: RawLocation)：替换当前路由为一个新的路由，而不会在历史记录中留下记录。与 push 方法类似，location 参	  数可以是一个字符串路径或一个描述目标位置的对象。

  3. go(n: number)：在历史记录中向前或向后导航 n 步。例如，router.go(-1) 将导航到上一个页面。

  4. back()：导航到上一个页面，等同于 router.go(-1)。

  5. forward()：导航到下一个页面，等同于 router.go(1)。

  6. currentRoute：一个响应式对象，包含当前活动路由的信息。它具有与 useRoute 返回的对象相同的属性，例如 path、params、		query 等。
*/

全局路由守卫

在src下创建一个 permisstion.ts 文件并在 main.ts 中引入它

permisstion.ts 内容结构为

// 路由鉴权
import { router } from '@/router/router'

// 引入进度条库
// @ts-ignore
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

// 引入用户信息仓库
import { pinia } from '@/store/index'
import { userStore } from './store/module/user'

const userstore = userStore(pinia)

// 全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {
  // 设置网页标题
  document.title = '硅谷甄选' + ' - ' + to.meta.title
  // 进度条开始
  NProgress.start()
  // 判断用户登录情况
  if (userstore.token) {
    // 用户已登录
    if (to.fullPath == '/login') {
      // 不让用户访问登录页
      next({ path: from.path })
    } else {
      // 其他页面放行
      // 判断有没有用户数据
      if (userstore.userInfo?.username) {
        // 有则放行
        next()
      } else {
        // 没有则请求数据
        try {
          // 请求成功 放行
          await userstore.getInfo()
          next()
        } catch (error) {
          // 请求失败（token过期） 清除用户信息，然后跳转到登录页重新登录
          userstore.logout()
          next({ path: '/login', query: { rederict: to.path } })
        }
      }
    }
  } else {
    // 用户未登录
    // 如果用户要去往登录页
    if (to.path == '/login') {
      // 放行
      next()
    } else {
      // 如果用户去往其他页面
      // 则让用户前往登录页
      next({ path: '/login' })
    }
  }
})

// 全局后置守卫
router.afterEach((to: any, from: any) => {
  // 进度条结束
  NProgress.done()
})