页面跳转
该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册
举个例子：
<navigator
url="navigate/navigate?title=navigate" //值为相对路径或绝对路径如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
hover-class="navigator-hover" //指定点击时的样式类，当hover-class="none"时，没有点击态效果
open-type="navigate" //
>
<button type="default">跳转到新页面</button>
</navigator>
open-type:
- navigate (默认值，对应 uni.navigateTo 的功能)
- redirect (对应 uni.redirectTo 的功能)
- switchTab (对应 uni.switchTab 的功能)
- reLaunch (对应 uni.reLaunch 的功能)
- navigateBack (对应 uni.navigateBack 的功能)
- exit (退出小程序，target="miniProgram"时生效)
url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决，如下为encodeURIComponent示例。
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
页面接参数时
// navigate.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}
注意⚠️
- 跳转tabbar页面，必须设置open-type="switchTab"
- navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色
总结
该组件还有挺多api的，如果感兴趣的民工老铁可以搭上➡️快捷列车了解了解；票价免费噢，还不用抢
image.png
