更新记录
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
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
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!