如何在uniapp(vue3)中使用Vue Router和router-view进行页面管理

uniapp 是一个基于 Vue.js 的跨平台前端框架，它支持使用 Vue 3 的组合式 API 进行开发。随着 Vue 3 的推出，组合式 API 为我们带来了更加灵活和简洁的代码组织方式。本文将介绍如何在 uniapp 项目中使用 Vue 3 的组合式 API 配合 Vue Router 实现高效的路由管理。

一、安装 Vue Router

首先，我们需要在 uniapp 项目中安装 Vue Router。在项目根目录下执行以下命令：

npm install vue-router@4

注意：这里安装的是 Vue Router 4.x 版本，它与 Vue 3 兼容。

二、配置 Vue Router

1、创建路由实例

在项目的 src 目录下创建一个 router 目录，并在其中创建一个 index.js 文件，用于配置路由实例。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/pages/home/Home.vue';
import About from '@/pages/about/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
  // 更多路由配置...
];

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

export default router;

2、在 `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');

三、使用组合式 API 和 router-view

在 App.vue 文件中，我们可以直接使用 router-view 组件，而在页面组件中，我们将使用 Vue 3 的组合式 API。

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

四、页面跳转

1、声明式导航

在页面中使用 router-link 组件进行声明式导航。

<router-link to="/about">关于我们</router-link>

2、编程式导航

在 setup 函数中，我们可以使用 useRouter 钩子函数进行编程式导航。

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToAbout() {
      router.push('/about');
    }

    return { goToAbout };
  }
};

五、总结

通过本文，我们学习了如何在 uniapp 中使用 Vue 3 的组合式 API 和 Vue Router 来管理路由。这种组合不仅提高了代码的可读性和可维护性，而且使得大型项目的开发更加高效。希望这些信息能帮助你在 uniapp 项目中更好地利用 Vue Router。

标签