Taro 3 + Vue 3项目的路由怎么搭建

在Taro (原PWA)项目中使用Vue 3构建路由，你可以按照以下步骤来设置：

1. **安装依赖**：
首先确保已经全局安装了`taro-cli`，然后在你的项目目录下安装`vue-router`：

   npm install @vue/router --save

2. **配置文件**：
- 在`taro.config.js`中引入`@vue/cli-service`并配置支持ES6模块：

     module.exports = {
       // ...其他配置
       esModule: true,
       configureWebpack: {
         resolve: {
           alias: {
             '@': path.resolve(__dirname, 'src'),
           },
         },
       },
     };

- 创建一个名为`router`的文件夹，并在其中创建一个`index.js`文件作为入口点。

3. **创建路由器实例**：
在`src/router/index.js`中，导入`vue-router`，创建路由实例并导出：

   import { createRouter, createWebHistory } from 'vue-router';
   import Home from './views/Home.vue';
   import About from './views/About.vue';

   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About },
   ];

   const router = createRouter({
     history: createWebHistory(process.env.VUE_APP_BASE_URL), // 如果是在线上环境，填入base URL
     routes,
   });

   export default router;

4. **组件内导航**：
在需要跳转的地方，比如`Home.vue`或`About.vue`中，导入`useRoute`钩子并使用它来导航：

   <template>
     <div>
       <!-- 内容 -->
       <button @click="goTo('/about')">访问关于页面</button>
     </div>
   </template>

   <script setup>
   import { useRouter } from 'vue-router';
   
   const router = useRouter();
   function goTo(path) {
     router.push(path);
   }
   </script>

5. **应用内导航**：
在`App.vue`或其他地方，可以使用`router-view`标签显示动态加载的组件：

   <template>
     <div id="app">
       <Header />
       <main>
         <router-view />
       </main>
       <Footer />
     </div>
   </template>