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>