uniapp-router-next-zm
v1.0.1
Published
> 一个类似于vue-router的路由器,用于uniapp,目前支持h5和微信小程序,只适用与vue3
Downloads
53
Maintainers
Readme
uniapp-router-next
一个类似于vue-router的路由器,用于uniapp,目前支持h5和微信小程序,只适用与vue3
安装
$ npm install uniapp-router-next
$ npm install unplugin-uni-router -D
使用
// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import uniRouter from 'unplugin-uni-router/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni(), uniRouter()]
})
// router.ts
import routes from 'uni-router-routes' //由unplugin-uni-router/vite根据pages.json生成
import { createRouter } from 'uniapp-router-next'
const router = createRouter({
routes,
//@ts-ignore
platform: process.env.UNI_PLATFORM,
h5: {}
})
export default router
// main.ts
import { createSSRApp } from 'vue'
import RouterNavigate from 'uniapp-router-next/components/router-navigate/router-navigate.vue'
import router from './router'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.component('router-navigate', RouterNavigate)
app.use(router)
return {
app
}
}
api跳转
import { useRouter } from 'uniapp-router-next'
const router = useRouter()
router.navigateTo({
path: '/pages/index/index',
//参数
query: {
name: 'name'
}
})
router.navigateTo...
router.reLaunch...
router.redirectTo...
router.switchTab..
组件跳转
<template>
<router-navigate to="/pages/index/index">go</router-navigate>
</template>
路由信息
import { useRoute } from 'uniapp-router-next'
const route = useRoute()
console.log(route)
// fullPath: '/pages/index/index'
// meta: {}
// query: {} 上一个页面的参数
// path: '/pages/index/home'
// name: ''
路由守卫
用法与vue-router类似
目前只有beforeEach和afterEach,beforeEach支持拦截,在页面跳转前出发,afterEach在页面的onShow生命周期触发
beforeEach 在返回 false,抛出错误,返回 Promise.reject,调用 next(false)时会停止,返回其它或者调用 next()则执行下一个守卫,next({path: 'xxx'})后终止当前并执行跳转
router.beforeEach(async (to, form, next) => {
console.log(to, form, 'beforeEach')
})
router.afterEach((to, form) => {
console.log(to, form, 'afterEach')
})