website·Indexed 30 days ago
https://moonofweisheng.github.io/uni-mini-router/A lightweight routing library based on Vue 3 and the uni-app framework. It provides APIs and functionality similar to Vue Router to help developers implement route jumping, parameter passing, and interception in uni-app projects. Supports APP, H5, and WeChat Mini Programs.
uni-mini-router library provides multi-platform coverage, supporting APP, H5, and WeChat Mini Programs.app.use(router) within the createApp function.import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
export function createApp() {
const app = createSSRApp(App)
app.use(router)
return {
app
}
}encodeURIComponent before being passed via params or query. On the receiving end, use decodeURIComponent and JSON.parse.// Sending page
const user = { name: '小星星', label: '小熊熊' };
router.push({
name: 'user',
params: { user: encodeURIComponent(JSON.stringify(user)) }
});
// Receiving page (user.vue)
onLoad((option) => {
if (option && option.user) {
const user = JSON.parse(decodeURIComponent(option.user))
}
})
The router supports two global navigation guards: beforeEach (executed before navigation) and afterEach (executed after navigation).
Important Caveats & Fixes:
beforeEach to avoid navigation failures (fixed in v0.1.2).async functions are now supported (fixed in v0.1.3).beforeEach did not execute after packaging for the H5 platform (fixed in v0.1.4).Uni Mini Router requires a route table generated from pages.json. You must choose one of the following two plugins:
pages.json during every hot reload. This is the only option that supports route information hot updates when compiling to mini-programs. (Supported from uni-mini-router@0.1.0 onwards).pages.json at build time and injects the route table as a global variable. Changes to pages.json require a rebuild to take effect.# To install uni-parse-pages
npm i add uni-parse-pages --save
# To install uni-read-pages-vite
npm i add uni-read-pages-vite --saveuni-mini-router package using your preferred package manager.# npm
npm i uni-mini-router --save
# yarn
yarn add uni-mini-router -D
# pnpm
pnpm add uni-mini-router -Drouter folder in the src directory (or root directory for HBuilderX projects) and create an index.ts file. You can generate the route table using one of two methods: uni-parse-pages or uni-read-pages-vite.// Option 1: Using uni-parse-pages
import { createRouter } from 'uni-mini-router'
import pagesJson from '../pages.json'
import pagesJsonToRoutes from 'uni-parse-pages'
const routes = pagesJsonToRoutes(pagesJson)
const router = createRouter({
routes: [...routes]
})
export default router
// OR Option 2: Using uni-read-pages-vite
import { createRouter } from 'uni-mini-router'
const router = createRouter({
routes: [...ROUTES] // ROUTES is typically provided via vite define
})
export default routername field to the page objects in pages.json.{
"pages": [
{
"path": "pages/home/Home",
"name": "home",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/login/Login",
"name": "login",
"style": {
"navigationBarTitleText": ""
}
}
]
}uni-read-pages-vite, you must inject the generated route table into the global ROUTES variable via the Vite define configuration. The configuration differs slightly based on how the project was created.// For CLI-created projects
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import TransformPages from 'uni-read-pages-vite'
export default defineConfig({
plugins: [uni()],
define: {
ROUTES: new TransformPages().routes,
}
});
// For HbuilderX-created projects
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import TransformPages from 'uni-read-pages-vite'
export default defineConfig({
plugins: [uni()],
define: {
ROUTES: new TransformPages(__dirname).routes,
}
});Be aware of the following limitations when using navigation guards: