更新记录

1.0.1（2026-03-07） 下载此版本

插件重构；

1. 新增 useRoute 函数返获取页面路径以及参数；
2. 删除 vite 部分，目前为纯 jssdk；

1.0.03（2024-08-28） 下载此版本

1. 新增监听 pages。json 文件；事实生成路由代码提示；

1.0.02（2024-07-30） 下载此版本

扩展路由传参

router.push('/xx?id=1') router.push('/xx', { type: 2 }) router.push('/xx?id=1', { type: 2 })

router.push({ url: '/xx?id=1' }) router.push({ url: '/xx', query: { type: 2 } }) router.push({ url: '/xx?id=1', query: { type: 2 } })

next('/xx?id=1')

平台兼容性

uni-app(3.6.17)

uni-app x(3.6.17)

use Router

• 还在为接收页面参数定义值或者赋值而烦恼吗？
• 此 jssdk 帮你解决接收页面参数带来的痛点。

Usage

import { beforeEach, useRouter } from '@/js_sdk/xx-router';

/** 全局导航前触发 */
beforeEach(function(to, from, next) {
    to.proxy    // 当前页面实例
    to.route    // 当前页面路径
    to.fullPath // 当前页面全路径加参数
    to.query    // 当前页面参数

    from.route      // 准备去往的页面路径
    from.fullPath   // 准备去往的页面全路径加参数
    from.query      // 准备去往的页面参数

    next    // 必须调用 next() 才能放行或者不使用 beforeEach 函数
    next(false)、next(Error('错误对象'))、next(new Error('错误对象'))   // 中断导航
    next()、next(true)、next('/xx/xx')、next('/xx/xx?xx=xx')    // 放行

    console.log('beforeEach to', to);
    console.log('beforeEach form', from);
    console.log('beforeEach next', next);
});

const router = useRouter();
/** 当前导航前触发 */
router.beforeEach(function(to, from, next) {});

import { useRoute } from '@/js_sdk/xx-router';

useRoute(route) // 获取当前页面 Route 对象，不传 route 默认获取当前页面 Route 对象

/**
 * handler 用户小程序参与 query 赋值 === useRoute() 返回值的 handler 函数
 * handler 优先级高于 useRoute() 返回值的 handler 函数
 * 注释必看系列：此函数作用于小程序且 vue setup 写法，因为小程序 vue setup 中的 query 参数是异步的
 * 如：vue setup 中 { ...query, a: 1 } 错误写法
 * 正确写法 1. handler({ a: 1 }) || handler(() => { a: 1 })
 * 正确写法 2. await query.__proto__.state 之后 { ...query, a: 1 }
 */
useRoute(_, handler)

const { proxy, route, fullPath, handler, query } = useRoute();

proxy   // 当前页面实例
route    // 当前页面路径
fullPath // 当前页面全路径加参数
handler  // === useRoute(_, handler) 第二个参数 handler
query    // 当前页面参数

import { useRouter } from '@/js_sdk/xx-router';

const { 
    reLaunch, switchTab, navigateTo, redirectTo, navigateBack, 
    currentRoute， to, go, back, push, replace, resolve, isReady
} = useRouter();

reLaunch        // 重定向到应用内的某个页面，且关闭其他所有页面
switchTab       // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
navigateTo      // 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
redirectTo      // 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
navigateBack    // 关闭当前页面，返回上一页面或多级页面
currentRoute    // 当前页面 Route 对象 === useRoute() 返回值
to              // === navigateTo
go              // === navigateBack
back            // === function() { navigateBack() }
replace         // === redirectTo
resolve         // 解析路由或者返回当前 Route 对象
isReady         // 当前导航是否完成
push            // 默认 === navigateTo；传入 options.method = 'reLaunch' || 'switchTab' || 'navigateTo' || 'redirectTo'，
                // 参数根据 options.method 传入

import { afterEach, useRouter } from '@/js_sdk/xx-router';

/** 全局导航结束触发 */
afterEach(function(to, from, error: Error) {
    to.proxy    // 当前页面实例
    to.route    // 当前页面路径
    to.fullPath // 当前页面全路径加参数
    to.query    // 当前页面参数

    from.route      // 准备去往的页面路径
    from.fullPath   // 准备去往的页面全路径加参数
    from.query      // 准备去往的页面参数

    console.log('afterEach to', to);
    console.log('afterEach form', from);
    console.log('afterEach error', error);
});

const router = useRouter();
/** 当前导航结束触发 */
router.afterEach(function(to, from, error) {});

import { onError, useRouter } from '@/js_sdk/xx-router';

/** 全局导航中发生错误触发 */
onError(function(error: Error) {
    event.type; // 触发错误函数名称；
    console.log('onError', error);
});

const router = useRouter();
/** 当前导航中发生错误触发 */
router.onError(function(error) {});

import { intercept } from '@/js_sdk/xx-router';

/** uni[reLaunch || switchTab || navigateTo || redirectTo || navigateBack] 执行拦截 */
intercept.once()    // 只拦截执行一次
intercept.on(reLaunch || switchTab || navigateTo || redirectTo || navigateBack, function(options: UniApp.InterceptorOptions) {
    console.log('intercept.on', options);
});

/** 移除 intercept.on 拦截 */
intercept.off(reLaunch || switchTab || navigateTo || redirectTo || navigateBack);

Method

• beforeEach 导航前置守卫钩子
• useRouter 获取导航方法及当前导航【前、后】置守卫钩子和当前导航错误钩子
• useRoute 获取导航实例
• afterEach 导航后置守卫钩子
• onError 导航错误钩子
• intercept 导航拦截

Contact

• 欢迎大家提供建议。

Enjoy!