mpvue入坑之旅（五）页面跳转

1 小程序跳转方式

mpvue兼容小程序，所以小程序的跳转可以直接使用，详见 开发者文档

//保留当前页面，跳转
wx.navigateTo({url: pageUrl})
//关闭当前页面，跳转
wx.redirectTo({url: pageUrl})
//关闭当前页面，返回上级或多级页面
wx.navigateBack({delta: 1})
//关闭所有页面，跳转
wx.reLaunch({url: pageUrl})
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({url: pageUrl})

//替换成mpvue也可以
mpvue.navigateTo({url: pageUrl})

2 标签方式跳转

标签跳转指定路由，不能跳转tabBar页面

<a href="/pages/index/main"></a>

<navigator url="/pages/index/main"></navigator>

3 使用插件 mpvue-router-patch

参考 https://blog.csdn.net/qq_32682301/article/details/105827802
1）安装插件

cnpm i -S mpvue-router-patch

2）引入插件

import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)

3）使用

// 跳转到下个页面，不关闭当前页面
this.$router.push('/pages/index/main')	

// 跳转tabBar的某个页面
this.$router.push({ path: '/pages/news/list', isTab: true })	

// 带查询参数，变成 /pages/news/detail?id=1
this.$router.push({ path: '/pages/news/detail', query: { id: 1 } })

// 重启至某页面，无需指定是否为 tabBar 页面，但 tabBar 页面无法携带参数
this.$router.push({ path: '/pages/news/list', reLaunch: true })

// 跳转到下个页面，并且关闭当前页面（$router.replace(location, onComplete?, onAbort?, onSuccess?)）
// 相当于 mpvue.redirectTo，location 参数格式与 $router.push 相似，不支持 isTab 及 reLaunch 属性
this.$router.replace('/pages/index/main')

// 关闭当前页面，返回上一页面或多级页面，n 为回退层数，默认值为 1
this.$router.go(n)

// 关闭当前页面，返回上一页面	
this.$router.back()

4 实例

<div>
  <a href="/pages/a/main">a标签跳转</a>

  <navigator url="/pages/b/main">navigator标签跳转</navigator>

  <button @click="navigateToC">点击跳转</button>
</div>


methods: {
  navigateToC() {
    wx.navigateTo({url: '/pages/c/main'})
  }
},

分别点击