【Vue3】VueRouter4 路由代码解析

Vue3都是导入一个创建实例的方法，它的底层是把new VueRouter()做了一个封装，可以把它当成一个封装的函数，它的内部还是进行new VueRouter的。

1. 创建路由实例由 createRouter 实现
2. 路由模式
   1. history 模式使用 createWebHistory()

基础代码解析

import { createRouter, createWebHistory } from 'vue-router'

// createRouter 创建路由实例，===> new VueRouter()
// 配置 history 模式
// 1. history模式：createWebHistory     地址栏不带 #，这个会用的更多一些，因为地址栏不带 #更美观一些
// 2. hash模式：   createWebHashHistory 地址栏带 #
// console.log(import.meta.env.DEV)

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘，代表着默认访问地址的前缀
// 而这个东西不应该写死，应该把它提成一个变量，import.meta.env.BASE_URL是vite中的环境变量，这个可以在vite.config.js中配置

// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了

const router = createRouter({
  // 当前的模式就是看当前导的方法，createWebHashHistory、createWebHistory（也就是Vue2中的history模式）
  history: createWebHistory(import.meta.env.BASE_URL),
  // routes还是一样的，原来怎么配，将来就怎么配
  routes: []
})

export default router

import.meta.env.BASE_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置基地址
  base: '/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

前三个单词都是固定的，里面会给你提供一些变量

vue.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置基地址
  base: '/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

---

如下图，router里面都含有相关的函数，route里面就含有参数对象

打印的route如下

App.vue

<script setup>
// 包是从router里面导进来的
import { useRoute, useRouter } from 'vue-router';
// 大的路由对象也可以直接导入
// import router from '@/router'

// const goList = () => {
//   // setup函数中的this指向undefined
//   this.$router.push('/list')
// }

// 在 Vue3 CompositionAPI 中
// 1. 获取路由对象 router 使用方法：useRouter
//  const router = useRouter()
// 2. 获取路由参数 route（Vue2中是this.$route），但在Vue3中，有个专门的语法 => useRoute
//  const route = useRoute()

const router = useRouter()
const route = useRoute()
const goList = () => {
  // 前面是大的路由器对象，后面是路由参数
  router.push('/list')
  console.log(router, route);
}
</script>

<template>
  <div>
    我是App
    <!-- Vue3中router是直接向前兼容Vue2中router的 -->
    <button @click="$router.push('/home')">跳首页</button>
    <!-- 但是当它提成一个函数时，setup函数中的this指向undefined -->
    <button @click="goList">跳列表页</button>

  </div>
</template>

<style scoped></style>