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>