小程序学习（五）：项目实战之uni-mini-router

光太郎
1,313 阅读2分钟

uni-mini-router

uni-mini-router是一个基于vue3和uni-app框架的轻量级路由库，它提供了类似Vue Router的API和功能，可以帮助开发者实现在uni-app中进行路由跳转、传参、拦截等常用操作。

1. 安装依赖

yarn add uni-mini-router -D
yarn add uni-read-pages-vite // 生成路由表
  • uni-read-pages-vite依赖vite，在编译时将读取pages.json生成的路由表注入全局变量

2. 创建一个新页面 mine

3. 在 src/pages.json 中添加页面配置

{
  "pages": [
    {
      "name": "home",
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "首页"
      }
    },
    {
      "name": "mine",
      "path": "pages/mine/index",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8"
  }
}

4. 配置vite.config.ts

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, // 注入路由表
  }
});

5. 声明文件type.d.ts

在项目src目录下创建type.d.ts文件。

declare const ROUTES: []

6. 配置router/index.ts

在src目录下新建 router/index.ts 目录文件

  • 我这写的与文档不相同主要是为了方便我的路由守卫
import {createRouter} from 'uni-mini-router'
import type {App} from 'vue'

const router = createRouter({
    routes: [...ROUTES] // 路由表信息
})

export function setupRouter(app: App<Element>) {
    app.use(router)
}

export {router}

7. 给TabBar 添加导航跳转

  • 通过在page.json 中设置的name 就可以进行跳转指定页面
const tabBarList = [
  {
    index: 1,
    title: "首页",
    icon: "home",
    onClick: () => router.push({name: "home"})
  },
  {
    index: 2,
    title: "扫一扫",
    icon: "scan",
    float: true,
    onClick: () => console.log("打开相机")
  },
  {
    index: 3,
    title: "我的",
    icon: "person",
    onClick: () => router.push({name: "mine"})
  }
]
  • 携带参数
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'mine', params: { username: 'eduardo' } })

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

8. 接收参数

  • 到需要跳转的页面
<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";

onLoad((option) => {
  console.log(option)
})
</script>

9. 导航守卫

  1. 在 /router 目录下创建 guard.ts 文件

  2. 全局前置守卫

  • to: 即将要进入的目标
  • from: 当前导航正要离开的路由
  • next: 用于reslove beforeEach钩子，需要确保 next 在导航守卫中都被严格调用一次-
    • next(): 执行默认路由跳转逻辑
    • next(false): 终止跳转逻辑
    • next({ path: '/' }): 跳转到不同的页面
    • next({ path: '/', navType: 'replaceAll' }): 改变当前跳转类型并跳转到不同的页面，可以通过navType指定新的跳转类型。（实例为中断当前导航，改用replaceAll方法跳转到新的页面）
export function createBeforeEachGuard(router: Router) {
  router.beforeEach((to, from, next) => {
    next()
  })
}
  1. 全局后置钩子
  • 分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用
export function createAfterEachGuard(router: Router) {
  router.afterEach((to, from) => {
  })
}
  1. 注册守卫
export function setupRouter(app: App<Element>) {
    app.use(router)
    createBeforeEachGuard(router)
    createAfterEachGuard(router)
}
avatar
文章
阅读
粉丝