Vue3+vite 路由实现

环境创建

我使用HbuilderX 创建了一个vue3的项目，目录结构如下：

现在在这个项目上实现基本的路由的功能，实现路由的功能需要安装相关的依赖组件：

vue-router

使用yarn 命令直接安装：yarn add vue-router

2. 创建router.ts 文件

在项目的src 的路径下router文件夹，创建router.ts文件内容如下：

import { createRouter, createWebHistory } from 'vue-router';
import HelloVue from '@/components/HelloVue.vue';
import HelloWorld from '@/components/HelloWorld.vue';const routes = [{ path: '/', component: HelloWorld },{ path: '/file2', component: HelloVue }
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

然后创建两个组件，这里的组件用到了别名，'@',实现方式是在vite.config.js 文件夹中进行如下的配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';import path from 'path';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, 'src'),// 扩展示例'@components': path.resolve(__dirname, 'src/components')},}
})

然后创建两个组件HelloWorld和HelloVue 这样的两个组件，并且导入到router.ts文件夹中，

3.修改main.js

import { createApp } from 'vue'
import router from './router/router'
import App from './App.vue'createApp(App).use(router).mount('#app')

查看效果：

可以看到的是具体的路径，'/' 标识的根路径：

 还有file2的路径：

上述就是最简单的路由的配置，

希望对你有所帮助