uniapp subPackages 分包及页面路由跳转

 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"
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.

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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.

pages/index/index.css:

登录后复制

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

• 1.
• 2.

pages/light/index/index.vue:

登录后复制

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

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

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

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

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

原创作者: xutongbao 转载于: https://blog.51cto.com/xutongbao/11830120