图解配置vite路由

一、安装路由插件

二、进行路由配置

在src下新建ruter文件夹和views文件夹。在ruter文件夹下新建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文件输入以下代码

六、在main.js文件中使用 

运行结果