Uni-app navigator路由组件
来自CloudWiki
页面跳转。
该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。
该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto
导航组件所在页面
<template> <view> <view class="page-body"> <view class="btn-area"> <navigator url="/pages/clients/clients?title=跳转到新页面" hover-class="navigator-hover"> <button type="default">跳转到新页面</button> </navigator> <navigator url="/pages/clients/clients?title=在当前页打开" open-type="redirect" hover-class="other-navigator-hover"> <button type="default">在当前页打开</button> </navigator> <navigator url="/pages/index/index" open-type="switchTab" hover-class="other-navigator-hover"> <button type="default">跳转tab页面</button> </navigator> </view> </view> </view> </template> <script> // navigate.vue页面接受参数 export default { onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 } } </script>
被链接页面
<template> <view> Hello,Clients <view class="text-area"> <text class="title">{{title}}</text> </view> </view> </template> <script> export default { data() { return { } }, methods: { }, onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.title); //打印出上个页面传递的参数。 this.title = option.title } } </script> <style> </style>