【总结】mpvue路由跳转相关技巧与填坑汇总

---

wx.switchTab(Object object) | 微信开放文档

wx.reLaunch(Object object) | 微信开放文档

wx.redirectTo(Object object) | 微信开放文档

wx.navigateTo(Object object) | 微信开放文档

wx.navigateBack(Object object) | 微信开放文档

EventChannel | 微信开放文档

---

一、mpvue路由跳转方式

1.标签型

(1)a标签

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

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

(2)navigator标签

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

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

navigator标签的其他高级用法可见：navigator | 微信开放文档

2.使用mpvue调方法

(1)mpvue.navigateTo

• 跳转指定路由，不能跳转tabBar页面
  • 【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】

mpvue.navigateTo({
  url: '/pages/login/main'
})

(2)mpvue.redirectTo

• 跳转指定路由，不能跳转tabBar页面，有意思的是跳转之后标题栏左上角会有一个home图标
  • 【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】

mpvue.redirectTo({
  url: '/pages/login/main'
})

(3)mpvue.switchTab

• 跳转tabBar的某个页面，并关闭其他所有非 tabBar 页面（标题栏的左上角不会有返回按钮）（也因此不能使用此方法跳转非 tabBar 页面）

mpvue.switchTab({
  url: '/pages/login/main'
})

(4)mpvue.reLaunch

• 关闭所有页面，打开到应用内的某个页面。（标题栏的左上角会有home样式返回按钮）
  • 【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】

mpvue.reLaunch({
  url: '/pages/login/main'
})

(5)mpvue.navigateBack

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

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

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

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

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

---

注：使用mpvue后，所有wx的方法属性都可以，也只能使用mpvue来调用

以上方法中使用的参数都可以携带如下属性：

wx.navigateTo({
    url:'/pages/login/main'.
    success() {}        // 成功后的回调；
    fail() {}          // 失败后的回调；
    complete() {}      // 结束后的回调(成功，失败都会执行)
})

---

3.使用插件

这里我是用的是mpvue-router-patch(在 mpvue 中使用 vue-router 兼容的路由写法)：https://github.com/F-loat/mpvue-router-patch

(1)安装依赖

cnpm i -S mpvue-router-patch

(2)引入插件

import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)

(3)使用插件

路由跳转会用到Router 实例的方法

// 跳转到下个页面，不关闭当前页面
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()

Router 实例属性

$router.app	// 当前页面的 Vue 实例
$router.mode	// 路由使用的模式，固定值 history
$router.currentRoute	// 当前路由对应的路由信息对象，等价于 $route

路由信息对象的属性

$route.path		// 字符串，对应当前路由的路径，总是解析为绝对路径，如 /pages/news/list

$route.params		// 空对象，小程序不支持该属性

$route.query		// 一个 key/value 对象，表示 URL 查询参数。
					// 例如，对于路径 /pages/news/detail?id=1，则有 $route.query.id == 1，如果没有查询参数，则是个空对象。

$route.hash		// 空字符串，小程序不支持该属性

$route.fullPath	// 完成解析后的 URL，包含查询参数和 hash 的完整路径

$route.name		// 当前路由的名称，由 path 转化而来

---

二、填坑

• mpvue项目编译时页面报错： 未找到 app.json 中的定义的 pages “pages/home/main” 对应的 WXML 文件
• 解决方法：重新npm run dev

---

发现新坑，持续更新。。。

---

拓展：

• 基于mpvue-router-patch实现路由拦截