uni-simple-router

主题

On this page

使用 simple-router-view 实现 uni-app 的灵活路由管理 ​

simple-router-view 是 uni-simple-router 插件中的一个组件，用于在 uni-app 项目中实现灵活的路由管理。它可以用来更好地管理和展示嵌套路由、动态路由等复杂路由场景。以下是使用 simple-router-view 实现灵活路由管理的详细步骤和示例。

1. 安装 uni-simple-router ​

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

2. 配置路由 ​

首先，在 src/router/index.js 中配置路由。simple-router-view 支持嵌套路由的灵活管理，因此你可以配置多层次的路由。以下是一个示例配置：

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'),
          children: [
            {
              path: 'settings',
              name: 'Settings',
              component: __dynamicImportComponent__('@/pages/Home/Profile/Settings.vue'),
            },
          ],
        },
      ],
    },
    {
      path: '/about',
      name: 'About',
      component: __dynamicImportComponent__('@/pages/About.vue',{pageType:`top`}),
    },
  ],
})

export default router

在上述配置中，/home 路径下有两个子路由 dashboard 和 profile，其中 profile 路由下还有一个子路由 settings。

3. 使用 simple-router-view 组件 ​

在你的主组件中，你需要使用 simple-router-view 组件来展示路由内容。假设你在 index.vue 中使用它，示例如下：

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

<script>

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

在上述代码中，uni-simple-router 会全局自动注入 simple-router-view 组件。simple-router-view 会根据当前路由的匹配情况自动渲染相应的组件。

4. 动态路由和命名视图 ​

simple-router-view 还支持动态路由和命名视图功能。例如，你可以配置多个 router-view 组件，以实现不同的视图层级。

js
const router = createRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: __dynamicImportComponent__('@/pages/Home.vue',{pageType:`top`  }),
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          components: {
            default: __dynamicImportComponent__('@/pages/Home/Dashboard.vue'),
            sidebar: __dynamicImportComponent__('@/components/SidebarDashboard.vue'),
          },
        },
      ],
    },
  ],
})

在主组件中，你可以配置多个 simple-router-view 组件来显示不同的视图：

js
<template>
  <view>
    <simple-router-view name="default"></simple-router-view>
    <simple-router-view name="sidebar"></simple-router-view>
  </view>
</template>

<script>

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

5. 总结 ​

使用 simple-router-view 组件可以帮助你在 uni-app 中实现灵活的路由管理。它支持嵌套路由、动态路由、命名视图等功能，使得路由管理更加清晰和高效。通过合理配置路由和使用 simple-router-view，你可以构建复杂且灵活的应用结构。