uni-simple-router

主题

On this page

在 uni-app 中使用 router-view 自定义视图的实现方法 ​

在 uni-app 中使用 uni-simple-router 实现自定义视图的方式与标准 Vue Router 的实现略有不同，但可以利用 uni-simple-router 的特性来达到相似的效果。以下是基于 uni-simple-router 的实现方法，展示如何使用 router-view 自定义视图：

1.安装和配置 uni-simple-router ​

1. 安装 uni-simple-router ​

首先，确保你已经安装了 uni-simple-router 插件，并在项目中进行了基础配置。

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

安装完成后，需要在项目中进行配置。

2. 配置 uni-simple-router ​

在 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: 'details',
          name: 'Details',
          component: __dynamicImportComponent__('@/pages/Details.vue')
        }
      ]
    },
    {
      path: '/about',
      name: 'About',
      component: __dynamicImportComponent__('@/pages/About.vue',{pageType:`top`})
    }
  ],
});

export default router

2. 在页面中使用 simple-router-view ​

1. 基础使用 ​

在你的 Vue 组件中使用 simple-router-view 来渲染匹配的子路由组件。例如，在 Home 页面中使用 simple-router-view 来显示子路由的内容：

示例：Home.vue ​

js
<template>
  <view>
    <view class="nav">
      <button @click="goToDetails">Go to Details</button>
      <button @click="goToAbout">Go to About</button>
    </view>
    <simple-router-view></simple-router-view> <!-- 渲染子路由组件 -->
  </view>
</template>

<script>
export default {
  methods: {
    goToDetails() {
      this.$Router.push({ name: 'Details' });
    },
    goToAbout() {
      this.$Router.push({ name: 'About' });
    }
  }
}
</script>

在 Details.vue 中，你的内容将根据子路由配置显示：

示例：Details.vue ​

js
<template>
  <view>
    <text>This is the Details page</text>
  </view>
</template>

2. 自定义 simple-router-view ​

可以通过 simple-router-view 的 name 属性来实现多个视图的渲染。你可以定义多个 simple-router-view，并指定视图名称，从而在不同的视图中展示不同的内容。

示例： ​

  • Home.vue
js
<template>
  <view>
    <view class="nav">
      <button @click="goToDetails">Go to Details</button>
      <button @click="goToAbout">Go to About</button>
    </view>
    <simple-router-view name="main"></simple-router-view> <!-- 主视图 -->
    <simple-router-view name="sidebar"></simple-router-view> <!-- 边栏视图 -->
  </view>
</template>

<script>
export default {
  methods: {
    goToDetails() {
      this.$Router.push({ name: 'Details' });
    },
    goToAbout() {
      this.$Router.push({ name: 'About' });
    }
  }
}
</script>

在 Details.vue 和其他页面中，你可以通过 simple-router-view 的 name 属性来指定渲染的视图：

示例： ​

  • Details.vue
js
<template>
  <view>
    <text>This is the Details page</text>
    <simple-router-view name="sidebar"></simple-router-view> <!-- 渲染侧边栏视图 -->
  </view>
</template>

3.动态组件加载 ​

使用动态组件来实现视图的灵活切换。你可以根据路由参数或其他条件动态选择加载的组件。

示例： ​

  • Home.vue
js
<template>
  <view>
    <component :is="currentComponent"></component>
  </view>
</template>

<script>
export default {
  computed: {
    currentComponent() {
      // 根据当前路由动态决定组件
      const routeName = this.$Route.name;
      return routeName === 'Details' ? 'DetailsComponent' : 'HomeComponent';
    }
  }
}
</script>

<!-- DetailsComponent.vue -->
<template>
  <view>
    <text>This is the Details component</text>
  </view>
</template>

<!-- HomeComponent.vue -->
<template>
  <view>
    <text>This is the Home component</text>
  </view>
</template>

4.总结 ​

在 uni-app 中使用 uni-simple-router 实现自定义视图的方式类似于使用 Vue Router 的方法，但需要注意以下几点：

  1. 基础配置：确保 uni-simple-router 的基本配置正确，并在页面中使用 simple-router-view 渲染匹配的组件。
  2. 自定义视图：可以使用多个 simple-router-view 来实现视图的自定义，指定 name 属性来渲染不同的视图内容。
  3. 动态组件：使用动态组件加载来根据条件或路由参数动态切换视图。

通过上述方法，你可以在 uni-app 项目中灵活地实现自定义视图，优化页面内容展示和用户体验。