vue-router 路由配置和404页面

    为啥我们切换页面时如此丝滑，就是因为我们在项目中引入了Vue Router，Vue Router是Vue.js官方提供的路由管理器。它可以将一个单页面应用分成多个视图，每个视图对应一个URL路径。使用Vue Router可以使得单页面应用的URL更加友好，也可以方便地实现页面之间的跳转、参数传递等功能，网址：https://router.vuejs.org/zh/，如果是vue3那么请选择v4.x以上的版本哈！

一、使用router

1. 安装包：
   npm install vue-router@4

2. 最好可以新建一个文件夹router在src下面，文件夹下新建一个js文件 （文件内容）

1.引入router的两个方法，一个是创建路由，一个设置他的路由模式
	import { createRouter, createWebHashHistory } from 'vue-router'
	
2.定义一个路由数组
// 每个路由都需要映射到一个组件
// 路由是由一个个route对象组成的，每个route对象包含了一个路径和一个对应的组件
	const routes = []

3.创建路由实例并传递 `routes` 配置
	const router = createRouter({
	  history: createWebHashHistory(), //配置路由模式
	  routes, //传入路由表
	})

 4. 暴露出去这个router
	export default router

3. 在main.js里引入并挂载
4. 使用 router-link 来创建链接，使用router-view将显示对应的组件

二、路由配置和404页面捕获

三、配置文件系统的别名

    我们发现我们项目代码百分之九十九都是在src文件夹里，我们有时去引入文件路径时比较麻烦，所以我们给 src 一个指定的别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
1.引入path模块，来处理路径相关的
import path from 'path'

export default defineConfig({

2.在vite官网中我们可以使用他的一个api,  resolve.alias
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),  指定他的路径用~代替
    },
  },
  
  plugins: [vue(), WindiCSS()],
})

四、总结

   使用 createRouter 创建路由，它需要传入一个对象，里面包括history 和 routes两个对象，history 是指路由模式，routes 是一个数组，里面存放了路由的一些信息，要跳转的路径和要显示的组件