路由

路由跳转

页面的跳转方式有两种

编程式导航	类似于vue中 router.push(...)
声明式导航 	类似于vue中 <router-link :to="...">

新建一个文件夹detail,用于存放详情的页面
设置页面的标题

声明式导航

wx语法

navigitor 组件
[属性]
url				当前小程序内的跳转链接
open-type		跳转方式

<navigitor url="" open-type="navigate" ></navigitor>

open-type = "reLaunch" 关闭所有页面，打开到应用内的某个页面(能跳到tabbar)
open-type = "navigate" 保留当前页面，跳转到应用内的某个页面(不能跳到tabbar)
open-type = "redirect" 关闭当前页面，跳转到应用内的某个页面(不能跳到tabbar)

<navigator url="/pages/shopcart/shopcart" open-type="reLaunch">
    <view class="icon_wrap flex">
        <van-icon name="shopping-cart" color="#666" size="22px"></van-icon>
        <text>购物车</text>
    </view>
</navigator>

uni语法

uni语法同wx语法相似

编程式导航

wx语法

wx.navigateTo()

wx.navigateTo(object)

wx.redirectTo()

wx.redirectTo(object)

url		需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数,如 'path?key=value&key2=value2'
events	页面间通信接口，用于监听被打开页面发送到当前页面的数据
success	成功的回调函数
fail	失败的回调函数
complete 结束的回调函数,调用成功失败都会执行

wx.navigateBack()

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

属性	说明
delta	返回的页面数，如果 delta 大于现有页面数，则返回到首页
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

使用案例

Page({
    //更新信息按钮的回调
    async updateUser() {
        //用户信息更新成功,回到tabbar个人中心页面
        //navigateTo|redirectTo
        // 发送请求
        const result = await reqUpdateInfo(this.data);
        if (result.code == 200) {
            //返回个人中心[login登录页销毁了!!!]
            wx.navigateBack();
        }
    },
})

wx.switchTab()

路由跳转，可以跳转到 tabbar 页面

参数 object
参数类型

uni语法

uni.navigate()