uni-simple-router

主题

On this page

如何在 uni-app 中实现嵌套路由：推荐插件与实现方法 ​

在 uni-app 中实现嵌套路由是开发复杂应用时常见的需求。嵌套路由允许你在页面内部定义子路由，从而使得路由管理更加灵活和层次化。在 uni-app 中，我们可以通过以下几种方法来实现嵌套路由：

1. 使用 uni-simple-router 插件 ​

uni-simple-router 是 uni-app 的一个路由插件，支持嵌套路由的实现。它提供了简单而强大的路由管理功能，适合用于复杂的页面和应用。下面是使用 uni-simple-router 实现嵌套路由的步骤：

1. 安装插件 ​

要在 uni-app 项目中使用 uni-simple-router，首先需要进行安装。你可以在官方地址 扫码登录后授权下载.

2. 配置路由 ​

在 src/router/index.js 中配置路由信息。我们可以设置嵌套路由的配置如下：

js
import Vue from 'vue'
import {
    createRouter,
    __dynamicImportComponent__
} from '@/uni-simple-router'


const router = createRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: __dynamicImportComponent__('@/pages/Home.vue',{pageType:`top` }),
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: __dynamicImportComponent__('@/pages/Home/Dashboard.vue'),
        },
        {
          path: 'profile',
          name: 'Profile',
          component: __dynamicImportComponent__('@/pages/Home/Profile.vue'),
        },
      ],
    },
    {
      path: '/about',
      name: 'About',
      component: __dynamicImportComponent__('@/pages/About.vue',{pageType:`top`}),
    },
  ],
})

export default router

在上述代码中，我们配置了一个 /home 路径的主路由，并在其下配置了两个子路由 dashboard 和 profile。这样，当访问 /home/dashboard 时，会展示 Dashboard 组件，而访问 /home/profile 时，会展示 Profile 组件。

3. 使用路由 ​

在 App.vue 中使用 simple-router-view 来显示匹配到的组件：

js
<template>
  <view>
    <simple-router-view></simple-router-view>
  </view>
</template>

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

在主组件中，我们通过 <simple-router-view> 标签来展示嵌套的路由组件。

2. 使用 vue-router 插件 ​

vue-router 插件是 Vue.js 的官方路由插件，虽然 uni-simple-router 是专为 uni-app 设计的，但如果你在 uni-app 中使用 Vue 2.x 版本，也可以使用 vue-router 来实现嵌套路由。具体步骤如下：

1. 安装插件 ​

通过 npm 安装 vue-router：

js
npm install vue-router --save

2. 配置路由 ​

在 src/router/index.js 中配置路由信息：

js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/pages/Home.vue'),
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: () => import('@/pages/Home/Dashboard.vue'),
        },
        {
          path: 'profile',
          name: 'Profile',
          component: () => import('@/pages/Home/Profile.vue'),
        },
      ],
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/pages/About.vue'),
    },
  ],
})

export default router

3. 使用路由 ​

与 uni-simple-router 使用方式类似，在主组件中使用 <router-view> 来显示嵌套的路由组件。

3. 总结 ​

在 uni-app 中实现嵌套路由，uni-simple-router 插件是一个推荐的选择，因为它简化了路由管理的复杂性。通过配置主路由和子路由，可以实现多层次的页面导航，满足复杂应用的需求。

选择 uni-simple-router 插件时，可以参考上述步骤来配置和使用嵌套路由。如果你的项目中使用的是 Vue 2.x 版本，也可以选择使用 vue-router 插件，方法与 uni-simple-router 类似。