用户登录

在 Taro 的应用里打开或者重定向到某个页面,可以使用 Taro 的 navigateTo 还有 redirectTo 。下面我们可以试一下这个东西。

打开项目里的 post-index 这个页面,在里面添加一个 button 组件,按钮文字是 navigate, 在这个按钮元素上面绑定一个 tap 事件,用 onTapNavigateButton 来处理这个事件。

再添加一组 button 元素,按钮文字是 redirect,按钮绑定 tap 事件,用 onTapRedirectButton 来处理这个事件。

然后在这个组件文件里添加一组 script,里面先导入 Taro,来自 @tarojs/taro 这个包。 默认导出一个对象,里面添加一个 methods 选项,在这个定义一个方法,名字叫 onTapNavigateButton,在这个方法里,可以用一下 Taro.navigateTo,提供一个对象,里面设置一下 url 属性,它的值就是要打开的页面地址,比如 /post/show/post-show 。

下面再添加一个方法,名字是 onTapRedirectButton, 在这个方法里,可以用一下 Taro.redirectTo 。提供一个对象,设置一下 url 属性,值是要重定向到的页面地址,设置成 /post/show/post-show。

测试

在模拟器测试一下,点击页面上这个按钮,会打开 post-show 这个页面,打开以后,在导航栏上会出现一个返回按钮。用 Taro 的 navigateTo 可以打开新的页面。 再试一下,点一下这个 Redirect 这个按钮,用 Taro 的 redirectTo 会在当前页面打开。

路由参数

在使用 navigateTo 或者 redirectTo 的时候,可以通过地址查询符的形式设置路由参数。比如在这个 url 地址里面先添加一个 ? 号,后面是地址查询符,比如添加一个 id,值可以先随便设置一个,比如 3 。

这样在这个 post-show 页面里面,我们可以获取到这个 id 查询符的值,然后根据它的值请求内容页面需要的数据。

打开 post-show 这个组件,在组件里面添加一组 script ,然后先导入一个 getCurrentInstance,来自 @tarojs/taro。

下面可以默认导出一个对象,里面添加一个 data 方法,返回一个对象,里面添加一个 id,默认值是 null。 然后再添加一个 created 生命周期,在里面可以用 getCurrentInstance 得到路由参数,解构一下这个参数,需要的是 id 这个参数值,用一下 getCurrentInstance,访问一下 router.params。

然后设置一下 this.id ,让它等于这个 id 。 在组件的模板里面,可以绑定输出组件里的 id 这个数据的值。

测试

在模拟器上再试一下,点击 Navigate 这个按钮,打开 post-show 页面以后,在页面上会显示一个 3, 这个值是在 post-index 页面上,通过路由参数传递给 post-show 这个页面的。

理解 Taro 的路由功能《 Taro.js:基于 Vue 开发多平台小程序 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点