Uniapp:navigator(页面跳转)

目录


一、基本概述

页面跳转。该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。

二、属性说明

属性名 类型 默认值 说明 平台差异说明
url String 应用内的跳转链接,值为相对路径或绝对路径,如:".../first/first","/pages/first/first",注意不能加 .vue 后缀
open-type String navigate 跳转方式

open-type 有效值

说明 平台差异说明
navigate 对应 uni.navigateTo 的功能,保留当前页面,跳转到应用内的某个页面
redirect 对应 uni.redirectTo 的功能,关闭当前页面,跳转到应用内的某个页面
reLaunch 对应 uni.reLaunch 的功能,关闭所有页面,打开到应用内的某个页面 抖音小程序与飞书小程序不支持

三、具体使用

html 复制代码
<template>
  <view v-for="item in dataList" :key="item.fl">
    <page-head :title="item.fl"></page-head>
    <view class="uni-padding-wrap uni-common-mt uni-mt-common">
      <view class="uni-flex common-class" :style='{"background-color": children.color}' v-for="children in item.children" :key="children.value">
        <navigator :url="children.value"><text>{{children.label}}</text></navigator>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [
          {
            fl: "视图容器",
             children: [
               {label: "view", value: "/pages/component/view/view", color: "#c0f5f9",},
               {label: "scroll-view", value: "/pages/component/scroll-view/scroll-view", color: "#75f4c4",},
               {label: "swiper", value: "/pages/component/swiper/swiper", color: "#f2b174",},
              ],
          },
        ]
      }
    },
    methods: {
      
    }
  }
</script>

<style>
  .uni-mt-common {
    display: flex;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 14rpx;
    color: #333;
  }
  .common-class {
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    width: 150rpx;
    height: 150rpx;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>
相关推荐
吴传逞1 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921431 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008891 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !1 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw51 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
2501_916007471 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)1 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
jingling5551 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
^Rocky1 天前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
2501_915918412 天前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview