taro-router-wx
v1.0.2
Published
微信小程序taro路由
Downloads
7
Maintainers
Readme
taro-router-wx
taro版本的微信小程序路由
install
$ npm install taro-router-wx
usage
// React
import React, { Component } from 'react'
import router from 'taro-router-wx'
router.installReact(React)
// Nerv
import Taro, { Component } from "@tarojs/taro";
import router from 'taro-router-wx'
router.installNerv(Taro)
// Vue
import Vue from 'vue'
import router from 'taro-router-wx'
Vue.use(router)
// 全局注册路由跳转前的钩子函数,可以拦截路由跳转
router.beforeEach((to, from, next) => {
console.log('当前页面:', to.path)
console.log('即将跳转的页面:', from.path)
// todo ..
// 必须执行next方法resolve进行跳转,否则跳转永远不会被执行
next()
// 阻止跳转
next(false)
// 重新跳转新的页面
next({path:'pages/test/index', query:{ test: 1 }})
})
// 全局注册路由成功跳转后的钩子函数
router.afterEach((res, page) => {
console.log('页面跳转成功 ===========')
console.log('当前页面信息', res)
console.log('当前页面打开方式', res.openType)
console.log('当前页面路径', res.path)
console.log('当前页面的路由参数', res.query)
console.log('当前页面的webviewId', res.webviewId)
console.log('当前页面的场景值', res.scene)
console.log('当前页面实例', page)
// todo ..
})
// class组件路由跳转
// React,Vue使用 this.$router 访问路由实例
// Nerv使用 this.$$router 访问
let location = {path: 'pages/test/index', query:{ test:1 }}
// 或者
// let location = 'pages/test/index?test=1'
// navigateTo
this.$router.push(location)
// redirectTo
this.$router.replace(location)
// switchTab
this.$router.switchTab(location)
// relaunch
this.$router.relaunch(location)
// navigateBack
this.$router.back()
// 异步获取当前页面的打开方式
this.$router.getPageOpenTypeSync(openType =>
console.log('当前页面打开方式', openType)
)
// 获取页面参数
this.$router.query
// 获取页面路径
this.$router.path
// 获取当前页面完整路径
this.$router.fullPath
// 获取当前页面实例
this.$router.currentPage
// 获取当前页面栈总数
this.$router.history.length
// 函数式组件路由跳转
import { useRouter } from 'taro-router-wx'
const router = useRouter()
// navigateTo
router.push(location)
// 其他api同class