Vue3+vite 路由实现

环境创建

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

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

vue-router

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

创建router.ts 文件

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

TypeScript 复制代码

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 文件夹中进行如下的配置：

TypeScript 复制代码

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

javascript 复制代码

import { createApp } from 'vue'
import router from './router/router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

查看效果：

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

还有file2的路径：

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

希望对你有所帮助