在Vue 3版本的uni-app中,你可以使用Vue Router进行路由管理。Vue Router是Vue.js官方提供的路由解决方案,可以方便地实现单页面应用的路由功能。以下是一些在Vue 3版的uni-app中使用Vue Router的好的方案:

  1. 安装Vue Router:首先,在你的uni-app项目中安装Vue Router。可以使用npm或yarn来安装Vue Router依赖。
npm install vue-router
  1. 创建路由实例:在你的uni-app项目中创建一个router.js文件(或其他自定义名称),并在其中导入Vue和Vue Router。然后创建一个路由实例并导出。
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './views/Home.vue'; // 导入你的页面组件

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由配置
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;

在上面的示例中,我们使用createWebHashHistory来创建路由的历史记录,你也可以根据自己的需求选择createWebHistory(使用HTML5历史记录API)或createMemoryHistory(用于服务器端渲染)。

  1. 在main.js中使用路由:在你的main.js文件中导入创建的路由实例,并将其挂载到Vue实例中。
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');
  1. 在组件中使用路由:现在,你可以在你的组件中使用路由了。例如,你可以使用<router-link>组件来创建导航链接,使用<router-view>组件来显示匹配到的组件。
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

在上面的示例中,我们创建了两个导航链接,分别对应到根路径和/about路径。当用户点击导航链接时,路由将会匹配到对应的组件并进行显示。

以上是一个使用Vue Router的基本方案。你可以进一步了解Vue Router的文档,以了解更多高级的路由配置选项和功能。