使用vite配置路由

一、创建vite项目

二、安装路由，指令npm install vue-router@4

三、全局引用路由

main.js文件源码：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//全局引用路由
import router from './router'
createApp(App).use(router).mount('#app')

四、路由配置

在src下新建router文件夹和views文件夹。在router文件夹下新建index.js文件，在views文件夹下新建InDex.vue文件

注意：router 文件夹、index.js文件、views 文件夹、InDex.vue文件最好不要改名字，因为全局配置中会用到。

index.js文件源码：

// 引入需要的模块
import { createRouter, createWebHistory } from "vue-router";
import InDex from "../views/InDex.vue";
// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
  {
    //默认展示，这是主页面路由必须加斜杠 /
    path: "/",
    component: InDex,
  },
  {
    path: "/hello",
    //路由懒加载
    component: () => import("../components/HelloWorld.vue"),
  },
];

// 创建路由
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 导出路由
export default router;

InDex.vue文件源码： 

App.vue源码：

HelloWorld.vue源码：

运行结果：