Vue3官网： https://v3.cn.vuejs.org/
Vite官网： https://cn.vitejs.dev/
VueRouter官网： https://next.router.vuejs.org/zh/

使用Vite构建时，会和以前的有些写法有些不同，例如之前我们使用

// 导入路由对象
import VueRouter from 'vue-router'
// 路径配置 .vue 可以省略
const routes = [
		path: '/',
		name: 'index',
		component: () => import('@/pages/index') //.vue可以省略
现在使用：
 
// 导入路由对象
import { createRouter,createWebHistory } from 'vue-router'
// 路径配置 .vue 不可省略
const routes = [
		path: '/',
		name: 'index',
		component: () => import('@/pages/index.vue') //.vue不可省略
以下是详细步骤
 
1、安装路由 Vue Router
 
npm install vue-router@4
2、配置路由文件（建立路由js）
 
在src目录下新建目录叫“router”，新建一个js文件叫“index.js”，文件内容如下：
 
// 导入router所需的方法
import { createRouter, createWebHistory } from 'vue-router'
// 导入路由页面的配置
import routes from './routes'
// 路由参数配置
const router = createRouter({
    // 使用hash(createWebHashHistory)模式，(createWebHistory是HTML5历史模式，支持SEO)
    history: createWebHistory(),
    routes: routes,
// 全局前置守卫，这里可以加入用户登录判断
router.beforeEach((to, from, next) => {
    // 继续前进 next()
    // 返回 false 以取消导航
    next()
// 全局后置钩子，这里可以加入改变页面标题等操作
router.afterEach((to, from) => {
    const _title = to.meta.title
    if (_title) {
        window.document.title = _title
// 导出默认值
export default router
接着新建一个js文件叫“routes”，内容如下(可以自己继续添加其他页面)：
 
const routes = [
        path: '/',
        name: 'index',
        title: '首页',
        component: () => import('@/components/index.vue'), //.vue不能省略
export default routes
3、在main.js中使用路由
 
在main.js里启用路由
 
import { createApp } from 'vue'
import App from './App.vue'
// 导入上面新建的路由文件
import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
4、修改Vite的配置文件，支持alias别名@
 
打开vite.config.js，如果你的path出现了红色波浪线，则还需要安装 @types/node
 
 
npm install --save @types/node
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
	resolve: {
    	alias: {
			'@': path.resolve(__dirname, 'src'),
	plugins: [vue()]
                                    vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR
                                    在使用函数组件时，unplugin-vue-components 无法解析自动注册组件，导致 @vant/auto-import-resolver 无法解析样式，因此需要手动引入样式。我们看到以上配置中，自动引入的有vue、vue-route、vue-i18n以及src/auto-imports.d.ts。eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验。为了方便地进行代码格式修复、报错提醒、规范化，这里继续安装和配置eslint。
基于vue3+vue-router4+webpack4+vant搭建的手机端基础框架
1、可以自适应手机屏幕
2、HttpRequest文件夹主要是axios基础配置配置、Http请求封装，可根据自己需求进行修改（暂未测试）
3、styles文件件主要是公共的css样式（本项目基于less），入口文件是index.less,自定义的css问津需要导入到index.less才会生效
4、util文件夹主要是以下常用的工具类（待完善）
5、router.js是路由配置文件
6、env.* 三个文件是根据不同环境的配置，主要是配置VUE_APP_BASE_URL这个参数加（接口地址）。VUE_APP_STATISTICS_URL是自定义的接口地址可不用
    最后在config/properties.js中配置引用。config文件夹 主要放一些配置信息文件
7、vue.config
                                    createApp(App).use(router)... 5. 第二步：创建路由配置文件 router/index.js，可复制《Vue3.x 工具篇》的配置；6. 第三步：创建视图组件 views/*.vue，比如：Home.vue 和 About.vue；7. 第四步：在 App.vue 中移植主页信息到 Home.vue，并设置 link；1. 进入项目目录，比如：vite-01，使用如下命令安装路由；4. 第一步：先注册路由，在 main.js 下注册路由；1.Vue-Router 安装。
                                    感觉 vite 有点学create-react-app了, 脚手架 也不给我们自动搞好 vuex 和 react-router ，让我这衣来伸手饭来张口的人感觉生活难了好多。
对我这个小白，不想学习 只想吃老本的前端程序员来说    太难了，但想了想为了挣钱还是老老实实去学习吧。
好了不恶搞了 开始步入正题了。
vue用着真爽 vite真快， 推荐
其实只要你是vue2 的熟练使用者的话，自己简单配置下 还是可以
因为vite搭配的是vue3 那么 vue-router 也应该是搭配 vue3
                                    接触过nuxt框架的小伙伴可能知道，在nuxt中不需要手动的去添加路由表，因为在pages文件夹下定义的文件会自动转换成路由，例如pages/home.vue，即可通过/home去访问该页面。
当然在vite中可以利用vite提供的Blob导入，实现nuxt那样一键式创建路由。具体实现如下：
创建路由文件router.js：
import {createRouter as _createRouter, createWebHistory} from 'vue-router';
const pages = i