uniapp-router-next

uniapp-router-next

一个类似于vue-router的路由器，用于uniapp，目前支持h5和微信小程序，只适用与vue3

安装

$ npm install uniapp-router-next
$ npm install  unplugin-uni-router uni-vite-plugin-h5-prod-effect -D

使用

// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import uniRouter from 'unplugin-uni-router/vite'
import h5ProdEffectPlugin from 'uni-vite-plugin-h5-prod-effect' //补充h5正式环境下面的跳转api
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni(), uniRouter(), h5ProdEffectPlugin()]
})

// 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')
})