更新记录
1.0.03(2024-08-28) 下载此版本
- 新增监听
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')
1.0.01(2024-07-25) 下载此版本
-
增加
tabbar页面导航守卫:router.tabbarBeforeEach; -
增加
tabbar页面以外的导航守卫:router.pagesBeforeEach;
平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
uni-app x
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| √ | √ | 5.0 | 12 | - | √ |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
use Router
- tabbar 页面自动识别跳转;
- 其他跳转方式;如:
router.push({ url: '/', type: "redirectTo" | "navigateTo" | "reLaunch" }); router.go();router.push('/');router.push('/', query = {});router.push({ url: '/' });router.push({ url: '/', query: {} });router.push({ url: '/', type: 'redirectTo' });router.push({ url: '/', query: {}, type: 'redirectTo' });
Usage
/** vite.config.js */
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import viteRouter from './js_sdk/xx-router/vite';
export default defineConfig({
plugins: [
uni(),
/** 注册路由 */
viteRouter()
]
});
/** main.js */
import App from './App';
import './types/index.d.ts';
import { createSSRApp } from 'vue';
import useRouter from './js_sdk/xx-router';
/** 路由跳转方法 */
const router = useRouter();
router.beforeEach(({ to, form, next }) => {
console.log('beforeEach to', to);
console.log('beforeEach form', form);
/** 导航守卫开启后必须放行 */
next();
});
export function createApp() {
const app = createSSRApp(App);
/** 注册全局路由 */
uni.$router = router;
/** 注册全局模板路由 */
app.config.globalProperties.$router = router;
return {
app
};
};
/** types/index.d.ts */
import useRouter from '../js_sdk/xx-router';
/** 扩展 global 类型 */
declare global {
/** 扩展 Uni 类型 */
interface Uni {
/** 注册全局路由代码提示 */
$router: typeof useRouter
}
}
export {};
Method
| name | type | description |
|---|---|---|
| go | (delta?: number) => void |
返回 |
| push | (url: 页面路径, query?: Record<string, string \| number>): void |
跳转 |
| push | (options: { url: 页面路径, query?: Record<string, string \| number>, type?: 'navigateTo' \| 'redirectTo' \| 'reLaunch' }): void |
跳转 |
| beforeEach | (guard: (options: { to: Page.PageInstance<AnyObject, {}>; form: 准备去往的页面路径; next: (url?: 页面路径) => void}) => void) => void |
注册全局前置守卫 |
| pagesBeforeEach | (guard: (options: { to: Page.PageInstance<AnyObject, {}>; form: 准备去往的页面路径; next: (url?: 页面路径) => void}) => void) => void |
注册全局页面导航守卫【除 tabbar 以外】 |
| tabbarBeforeEach | (guard: (options: { to: Page.PageInstance<AnyObject, {}>; form: 准备去往的页面路径; next: (url?: 页面路径) => void}) => void) => void |
注册全局 tabbar 导航守卫 |
- 导航守卫执行顺序:
tabbarBeforeEach || pagesBeforeEach=>beforeEach;注:所有导航守卫共用next函数且只会执行一次;
Contact
- 欢迎大家提供建议。
Enjoy!

收藏人数:
下载插件并导入HBuilderX
下载插件ZIP
赞赏(0)
下载 1817
赞赏 8
下载 10676414
赞赏 1797
赞赏
京公网安备:11010802035340号