更新记录
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
;
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue app-uvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
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!