基于vue3和uniapp的uni-mini-router路由库的安装与使用

uni-mini-router是一个基于vue3uniapp轻量级的路由框架,它可以实现类似vue里的vue-Router的功能

在这里不得不说一下某些框架的官方路由库,啧啧啧,居然还要收费!

不过!!! uni-mini-router这个库亲测好用,可以实现路由库该有的基本功能!!!

下面我们开始进行它的安装和配置说明

其官方地址是Moonofweisheng/uni-mini-router (github.com)

安装

我们在项目根目录

Yarn

shell 复制代码
yarn add uni-mini-router -D

npm

shell 复制代码
npm install uni-mini-router --save

读取路由表

我们得先有路由表才能对路径的跳转进行控制和获取相应信息

这里其实有两种方式:uni-parse-pagesuni-read-pages-vite读取路由表,但是其中一种:uni-read-pages-vite 依赖vite编译时读取pages.json生成的路由表注入全局变量,换句话说uniapp在编译到小程序端时无法触发vite的热更新就是不能用的意思) ,所以我们这里只作uni-parse-pages的相关使用介绍

安装uni-parse-pages

先在项目根目录安装uni-parse-pages

Yarn

csharp 复制代码
yarn add uni-parse-pages -D

Npm

shell 复制代码
npm install uni-parse-pages --save

配置uni-mini-router

开始在项目里配置uni-mini-router

创建router文件夹

我们直接在项目根目录创建router文件夹,再在里面创建 index.js文件

配置router/index.js

在index.js文件中

js 复制代码
import { createRouter } from 'uni-mini-router'
// 导入pages.json
import pagesJson from '../pages.json'
// 引入uni-parse-pages
import pagesJsonToRoutes from 'uni-parse-pages'
// 生成路由表
const routes = pagesJsonToRoutes(pagesJson)
const router = createRouter({
  routes: [...routes] // 路由表信息
})
export default router

配置main.js

js 复制代码
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
  }
}

配置pages.json

就是正常配置,不过需要使用name跳转页面时,需要在路由表中的相应页面对象中加入name属性

json 复制代码
{
	"pages": [ 
		{
			"path": "pages/index/index",
			"name":"index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		
		....

但是name值必须有唯一性!!!

在项目中使用

!!!注意: 只能nameparamspathquery搭配使用

基本使用

在使用的时候和vue中的vue-router基本没什么太大区别

这里以push方法为例

html 复制代码
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'uni-mini-router'
// 使用hooks(推荐)
let router = useRouter()

// 字符串路径
router.push('/user')

// 带有路径的对象
router.push({ path: '/user' })
    
// 只能`name`和`params`,`path`和`query`搭配使用
// 命名的路由,并加上参数,让路由建立 url
    
    
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /user?username=eduardo
router.push({ path: '/user', query: { username: 'eduardo' } })

</script>

如果在其他页面获取跳转时传递的参数,一般是使用onLoad生命周期函数

js 复制代码
<script setup lang="ts">
import {onLoad } from '@dcloudio/uni-app'   //vue3中setup写法需要自己导入生命周期函数
onLoad((option) => {                        
  if (option && option.username) {           //不管是使用query还是params传递参数,参数都是从
    const username = option.username
  }
})
</script>

传递对象

值得一提的我们在跳转时传递对象参数的话建议把它转换成字符串再进行传参 ,不过字符串太长的话建议使用窗口通信 还有全局数据仓库

比如以下示例

javascript 复制代码
<script setup >
	import { useRouter } from 'uni-mini-router'

    let router=useRouter()

	let user={
		name:'ggbond'
	}
	let gorouter=()=>{
		router.push({name:'test',params:{user:JSON.stringify(user)}})
	}
</script>

在接收页面用**JSON.parse**转换过来就好

路由守卫

路由守卫有全局前置守卫 beforeEach全局后置钩子 afterEach

全局前置守卫beforeEach

使用router.beforeEach注册一个全局前置守卫

js 复制代码
const router = createRouter({ ... })

router.beforeEach((to, from, next) => {
  // next入参 false 以取消导航
  next(false)
})

对于**beforeEach**三个参数的说明:

  • to: 即将要进入的目标

  • from: 当前导航正要离开的路由

  • next: 用于reslove这个beforeEach钩子,需要确保next在导航守卫中都被严格调用一次

    • next(): 执行默认路由跳转逻辑

    • next(false): 终止跳转逻辑

    • next({ path: '/' }): 跳转到不同的页面

    • next({ path: '/', navType: 'replaceAll' }): 改变当前跳转类型并跳转到不同的页面,可以通过navType指定新的跳转类型。(实例为中断当前导航,改用replaceAll方法跳转到新的页面)

全局后置钩子afterEach

同理使用方法

js 复制代码
const router = createRouter({ ... })

router.afterEach((to, from) => {
  console.log(to)
  console.log(from)
})

上面两个参数的作用和beforeEach的一样

useRouter和useRoute

useRouter

useRouter返回Router

Router的实例方法

push方法

▸ router.push(target:RouteLocationRaw): void

保留当前页面,跳转到应用内的某个页面,相当于使用 uni.navigateTo(OBJECT)

pushTab方法

▸ router.pushTab(target:RouteLocationRaw): void

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,相当于使用 uni.switchTab(OBJECT)

replace方法

▸ router.replace(target:RouteLocationRaw): void

关闭当前页面,跳转到应用内的某个页面,相当于使用 uni.redirectTo(OBJECT)

replaceAll方法

▸ router.replaceAll(target:RouteLocationRaw): void

关闭所有页面,打开到应用内的某个页面,相当于使用 uni.reLaunch(OBJECT)

back方法

▸ router.back(level?: number): void

关闭当前页面,返回上一页面或多级页面,相当于使用 uni.navigateBack(OBJECT)

useRoute

useRouter返回Route

Route记录着当前路由的信息

相关推荐
小样还想跑13 分钟前
axios无感刷新token
前端·javascript·vue.js
Java水解22 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户38022585982444 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子1 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a1 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心1 小时前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq1 小时前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端