uniapp subPackages 分包及页面路由跳转

发布于:2024-08-23 ⋅ 阅读:(125) ⋅ 点赞:(0)

https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages

pages.json:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "navigationStyle": "custom"
      }
    }
  ],
  "subPackages": [
    {
      "root": "pages/light",
      "pages": [
        {
          "path": "index/index",
          "style": {
            "navigationBarTitleText": "首页"
          }
        }
      ]
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

pages/index/index.vue:

<template>
  <view class="m-login-wrap">
    <button @click="() => handleJumpPath({ url: '/pages/light/index/index' })" class="m-login-btn">
      登录
    </button>
  </view>
</template>

<script setup lang="ts">
import './index.css'
const handleJumpPath = (path: any) => {
  uni.navigateTo(path)
  console.log(path)
}
</script>

<style></style>

pages/index/index.css:

.m-login-wrap{display: flex;padding: 10px;}
.m-login-btn{width: 100px;margin: 0;}



pages/light/index/index.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<template>
  <view>
    <text>首页</text>
  </view>
</template>

配置分包文件后需要重启项目

https://uniapp.dcloud.net.cn/api/router.html#navigateto

人工智能学习网站

https://chat.xutongbao.top


网站公告

今日签到

点亮在社区的每一天
去签到