uni-app vue3+vite开发H5使用<router-view>插件需求

开发环境	版本号	项目创建方式
vue2	-	-

后期页面大改动后，功能复杂起来后，发现使用router4中的<router-view>能解决很多问题，或者规避复杂的解决方案，此时替换成vue3结合vue-router开发成本过高。例如页面回退缓存功能，刷新后不会回到初始页（现在使用组件的方式，刷新后回到初始页）等等，官方没有开发相关的，uni-simple-router目前只支持到vue2，其中的H5开发模式就是想要的方案。个人能力暂时不足，不知道怎么屏蔽pages.json使用vue-router，所以来此发布插件需求。

vueper 1楼•9 天前作者

在使用uni-app结合Vue 3和Vite进行H5开发时，通过<router-view>插件来实现路由跳转和视图渲染是一个常见的需求。下面是一个具体的代码案例，展示了如何配置和使用Vue Router来实现这一功能。

1. 安装依赖

首先，确保你已经安装了必要的依赖。如果你还没有安装Vue Router，可以通过以下命令安装：

npm install vue-router@next

2. 配置Vue Router

在你的项目中创建一个router文件夹，并在其中创建一个index.js文件来配置路由。

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

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

3. 在main.js中引入路由

接下来，在你的main.js文件中引入并使用配置好的路由。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

4. 使用`<router-view>`

在你的App.vue文件中使用<router-view>来显示当前路由对应的组件。

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* 你可以在这里添加全局样式 */
</style>

5. 创建视图组件

确保你已经在views文件夹中创建了Home.vue和About.vue组件，并定义了它们的基本内容。

<!-- views/Home.vue -->
<template>
  <div>Home Page</div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<!-- views/About.vue -->
<template>
  <div>About Page</div>
</template>

<script>
export default {
  name: 'About'
};
</script>