VueRouter4 路由代码解析

一、路由初始化

1.1. Vue2和Vue3路由创建比对

1.2. Vue3路由解析

1.3. 基础代码解析

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

// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory()   http://xxx/user
// 2. hash模式: createWebHashHistory()  http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，就是 vite.config.js 中的 base 配置项
// https://vitejs.dev/guide/build.html#public-base-path

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

import.meta.env.BASE_URL的值就是vite.config.js中的base配置项（默认 /）

vite.config.js

export default defineConfig({
  plugins: [
    vue(),
  ],
  base: '/', //import.meta.env.BASE_URL的值就是base配置项目
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

1.4. 路由的使用

<script setup>
// 这样不行，this没有
// const goList = () => {
//     this.$router.push('/lish')
// }

import { useRouter, useRoute } from 'vue-router'
// 在vue3 compositionAPI中
// 1. 获取路由对象 router useRouter
//    const router = userRouter()
// 2. 获取路由参数 route useRoute()
//    const route = useRooute()
const router = useRouter()
const goList = () => {
  router.push('/list')
}
</script>

<template>
  <div>
    appVue
    <button @click="$router.push('/home')">to Index</button>
    <button @click="goList">to listPage</button>
  </div>
</template>

<style scoped></style>

二、总结

vite环境变量地址：https://cn.vitejs.dev/guide/env-and-mode.html