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 的功能，关闭所有页面，打开到应用内的某个页面	抖音小程序与飞书小程序不支持

三、具体使用

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