uni-app 路由库 uni-simple-router 示例工程演示

该文介绍了uni-simple-routerv3的示例工程,包括如何安装、目录结构,以及涉及的特性如H5转场动画、App拦截、动态嵌套路由、权限控制和全局路由守卫等。
摘要由CSDN通过智能技术生成

uni-simple-router-v3 示例工程介绍

您可以在 GitHub 上找到 uni-simple-router v3示例源代码。要运行示例功能非常简单,但在此之前,您必须已经获得授权并下载了 uni-simple-router v3 版本。如果您尚未获得授权或未下载,请点击此处获取授权和下载

如果你正在使用 vue3 + vite 请参考 uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭,或者查看 官方文档

安装 uni-simple-router

请将已经下载下来后的插件包解压,并放入项目根目录下的 uni-simple-router 文件夹中。如果没有 uni-simple-router 文件夹,你必须自己新建一个 uni-simple-router 文件夹,并将插件包放入里面,即可完成安装。

目录结构

C:\Users\Administrator\Desktop\v3-example
├─colorui
├─components
├─examples
├─node_modules
├─pagesA
├─pages-A-child
├─pagesB
├─pages-B-child
├─pagesMain
├─router
├─static
├─tabbar
├─uni-simple-router
|         ├─appletRouterView.vue
|         ├─compiler.d.ts
|         ├─compiler.js
|         ├─compiler.js.LICENSE.txt
|         ├─index.d.ts
|         ├─index.mjs
|         ├─index.mjs.LICENSE.txt
|         ├─version.json
├─utils
├─vk-uview-ui_1.4.5
├─App.vue
├─index.html
├─main.js
├─manifest.json
├─newMain.js
├─package.json
├─pages.json
├─pnpm-lock.yaml
├─uni.scss
├─vite.config.js

安装依赖

在项目根目录下执行,安装示例项目所需依赖。

npm install

H5 父级窗体转场动画

在这里插入图片描述

H5 父级窗体随机转场动画

在这里插入图片描述

H5 子路由转场动画

在这里插入图片描述

App 拦截所有返回

在这里插入图片描述

App 使用无限嵌套路由

在这里插入图片描述

App 使用子路由

在这里插入图片描述

小程序 首屏拦截

在这里插入图片描述

小程序 使用动态嵌套路由

在这里插入图片描述

小程序 使用权限路由

在这里插入图片描述

小程序 使用子路由

在这里插入图片描述

重定向及404

在这里插入图片描述

上帝函数组件通讯

在这里插入图片描述

全局路由守卫

在这里插入图片描述

无限嵌套权限路由

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值