技术标签: 微信小程序 uni-app 路由管理器 前端 vue.js 小程序 uni-app
2023年7月11日
,uni-simple-router
v3
发布了它的第一个版本,带来了对传统uni-app
项目结构与模式的重要改变。从此版本开始,您无需再在每次操作中手动定义页面路由,而是统一由插件进行管理。这个改变为您提供了更加便捷和灵活的路由管理方式。此外,uni-simple-router
v3
还引入了一系列强大的功能,让您能够在跨平台的环境下充分发挥它的优势,包括动态路由表、嵌套路由和路由守卫等等。下面将详细介绍 uni-simple-router
的主要功能,更多详细信息请参阅官方文档。
功能及权益 | 收费版 (V3版) | 开源版 (V2版) |
---|---|---|
H5非手动导航拦截 | ||
H5自定义路径 | ||
H5动态路由匹配 | ||
H5动态增减路由表 | ||
H5多级嵌套路由 | ||
H5转场动画引擎 | ||
APP启动页面拦截 | ||
APP原生tabbar拦截 | ||
APP原生返回拦截 | ||
APP nvue深度兼容 | ||
APP动态路由匹配 | ||
APP动态增减路由表 | ||
APP多级嵌套路由 | ||
小程序启动页面拦截 | ||
小程序动态路由匹配 | ||
小程序动态增减路由表 | ||
小程序多级嵌套路由 | ||
响应式路由元对象 | ||
Vue3 + Vite 支持 | ||
无需管理pages.json | ||
自定义路由表全端通用 | ||
全端通用动态权限认证 | ||
全端通用重定向 | ||
守卫 beforeRouteLeave | ||
守卫 beforeEach | ||
守卫 beforeEnter | ||
守卫 beforeRouteUpdate | ||
守卫 beforeRouteEnter | ||
守卫 beforeResolve | ||
客服支持 | ||
实时维护及更新 | ||
小程序原生tabbar拦截 | ||
小程序原生返回拦截 |
pages.json
中 {#no-page-in-pages}不再为每次添加页面而繁琐地编辑庞大的pages.json
文件,也不再为为某个页面添加页面属性而反复查找。uni-simple-router
解决了这个问题。您只需要在构建路由时,将对应的路由表和组件的映射关系传递给插件即可。插件会自动处理路由配置,让您的路由管理变得更加简洁和高效。
假设你现在需要注册一个根页面(顶级页面)
传统方式
// pages.json
{
"pages":[
"path":"/pages/index/index",
"style":{
}
]
}
// 跳转
uni.navigateTo(`/pages/index/index`)
// H5 URL 表现
console.log(location.pathname) // ===> 输出:/pages/index/index
插件方式
// pages.json
{
}
// router.js
import {
__dynamicImportComponent__
} from '@/uni-simple-router'
const router = createRouter({
routes:[{
path:`/`,
component:__dynamicImportComponent__(`@/pages/index.vue`,{
pageType:`top`
}),
}]
})
// 跳转
router.push(`/`)
// H5 URL 表现
console.log(location.pathname) // ===> 输出:/
你还可以传递更复杂的路由表关系,例如嵌套路由表,或者设置根页面风格,及创建动态路由匹配。
有时我们可能需要在同一个组件下渲染不同ID或身份的数据,这时我们就需要用到高级路由匹配。
// router.js
import {
__dynamicImportComponent__
} from '@/uni-simple-router'
import {
unref
} from 'vue'
const router = createRouter({
routes:[{
path:`/desc/:id`,
name:`desc`,
component:__dynamicImportComponent__(`@/pages/index.vue`,{
pageType:`top`
}),
}]
})
// 跳转
router.push({
name:`desc`,
params:{
id:123
}
})
// 获取id
unref(router.currentRoute).params
一些简单的匹配
const routes = [
// 匹配 /home
{
path: '/home', component: Home }, // 静态路径匹配
// 匹配 /user/3549
{
path: '/user/:id', component: User }, // 动态路由参数匹配
// 匹配 /product/21312 或者 /product
{
path: '/product/:category?', component: Product }, // 可选参数匹配
// 匹配 /admin/10086/111 或者 /admin/任何数据
{
path: '/admin/(.*)', component: Admin }, // 通配符匹配
// 匹配 /posts/sdsad/11222 多个可重复的分组
{
path: '/posts/:id+', component: Posts }, // 可重复参数匹配
// 匹配 /posts/1111 只匹配数字参数
{
path: '/users/:id(\\d+)', component: Users }, // 正则表达式匹配
]
更多复杂的匹配方式请查考官方文档。
命名视图:
在 uni-simple-router
中,命名视图(Named Views
)允许我们在同一个路由中同时渲染多个视图,以实现更灵活和复杂的页面布局。通过命名视图,我们可以在一个页面中定义多个区域,每个区域可以渲染不同的组件或内容。
命名路由:
除了为路由提供 path
属性之外,你还可以为任何路由配置一个 name
属性。
定义一个默认的命名视图
// router.js
import {
__dynamicImportComponent__
} from '@/uni-simple-router'
// 导入组件
const MainContent = __dynamicImportComponent__(`@/pages/mainContent.vue`,{
pageType:`top`
})
const routes = [
{
path: '/dashboard',
component:MainContent
}
]
定义多个自定义名的命名视图
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar />
<!-- UserEmailsSubscriptions / UserProfile 将会渲染到这里 -->
<simple-router-view />
<!-- UserProfilePreview 将会渲染到这里 -->
<simple-router-view name="helper" />
</div>
// router.js
import {
__dynamicImportComponent__
} from '@/uni-simple-router'
const UserEmailsSubscriptions = __dynamicImportComponent__(`@/pages/UserEmailsSubscriptions.vue`)
const UserProfile = __dynamicImportComponent__(`@/pages/UserProfile.vue`)
const UserProfilePreview = __dynamicImportComponent__(`@/pages/UserProfilePreview.vue`)
const routes = [
{
path: '/settings',
// 你也可以在顶级路由就配置命名视图
component: UserSettings,
children: [
{
path: 'emails',
component: UserEmailsSubscriptions
},
{
path: 'profile',
components: {
default:UserProfile,
helper: UserProfilePreview
}
}
]
}
]
有时我们需要在用户访问某个路由时,自动将其重定向到另一个指定的路由,这时我们就需要用到 重定向
。当用户访问不存在的页面路径时,我们需要给出一个友好的提示,而不是显示空白页面,这时我们就需要用到 404页面捕捉
。
//router.js
const routes = [
{
path: '/',
redirect: '/home',
component:IndexComponent
},
{
path: '/home',
component: HomeComponent
}
];
在上述示例中,当用户访问根路径 /
时,会自动重定向到 /home
路由。
import {
createRouter,
type platformRule
} from '@/uni-simple-router'
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM as platformRule,
routeNotFound:(to)=>{
console.log(to)
return {
name:`404`,
query:{
args:`routeNotFound`
}
}
},
routes:[{
path: `/404`,
name: `404`,
component: __dynamicImportComponent__('@/components/404.vue',{
pageType: `top`,
})
}]
})
如需了解更多详细,请查阅官方文档重定向及别名,捕捉路由404。
在子路由中,你可以使用路由表中的 props
配置来自动解析参数,而无需手动获取参数。这种方式可以取代传统的手动获取参数的方式。但需要注意的是,这种自动解析参数的功能只适用于子路由,不适用于顶级页面。
/**
* 该演示路由为子路由表
* 为简化示例,移除了父级路由
*/
const routes = [
{
path: 'user/:id',
component: UserComponent,
props: true,
}
]
在 UserComponent
组件中,你可以直接访问 id
参数,它会自动作为组件的 props
:
// UserComponent.vue
export default {
props: ['id'],
// ...
}
如需了解更多详细,请查阅官方文档路由组件传参。
要创建嵌套路由,你需要在路由表中使用 children
字段来定义子路由。每个子路由都是一个对象,可以包含 path
、component
、props
等字段,类似于顶级路由的定义。
下面是一个示例,展示了如何使用嵌套路由创建一个后台管理系统的布局:
// router.js
import {
__dynamicImportComponent__
} from '@/uni-simple-router'
const routes = [
{
path: '/admin',
component: __dynamicImportComponent__(`@/pages/AdminLayout.vue`,{
pageType:`top`,
}),
children: [
{
path: 'dashboard',
component: __dynamicImportComponent__(`@/pages/DashboardPage.vue`)
},
{
path: 'users',
component: __dynamicImportComponent__(`@/pages/UsersPage.vue`)
},
{
path: 'settings',
component: __dynamicImportComponent__(`@/pages/SettingsPage.vue`)
}
]
}
];
在 AdminLayout
组件的模板中,可以使用 <simple-router-view>
组件来显示当前活动的子路由组件:
<!-- AdminLayout.vue -->
<template>
<div>
<sidebar></sidebar>
<main>
<simple-router-view></simple-router-view>
</main>
</div>
</template>
如需了解更多详细,请查阅官方文档嵌套路由。
在 uni-simple-router
中,你可以使用动态路由来实现根据不同的条件生成和注册路由。动态路由允许你根据需要在运行时动态添加、修改或删除路由配置。
// router.js
const router = createRouter({
// 其他配置
routes: [{
path: '/articleName', component: Article }],
})
// 添加路由表
router.addRoute({
path: '/about', component: About })
router.addRoute({
path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
name
作为第一个参数传递给 router.addRoute()
,这将有效地添加路由,就像通过 children
添加的一样:router.addRoute({
name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', {
path: 'settings', component: AdminSettings })
如需了解更多详细,请查阅官方文档动态路由。
import {
createRouter
} from '@/uni-simple-router'
const router = createRouter({
platform:process.env.VUE_APP_PLATFORM as platformRule,
routes:[
// ...
]
})
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({
path: '/users/eduardo' })
// 命名的路由,并加上参数,让路由建立 url
router.push({
name: 'user', params: {
username: 'eduardo' } })
// 带查询参数,结果是 /register?plan=private
router.push({
path: '/register', query: {
plan: 'private' } })
// 跳转到原生Tabbar
router.pushTab({
name: 'tab1' })
// 关闭所有页面并打开指定页面
router.replaceAll({
name: 'my' })
// 替换当前页面栈并打开新页面
router.replace({
name: 'record' }).then(()=>{
console.log(`导航完成`)
})
// 返回页面
router.back(1)
// xxxx.vue
export default {
onShow(){
// 如果你是在 vue 组件内部,你可以直接访问 $Route
console.log(this.$Route)
},
}
// xxxx.vue
import {
useRoute } from '@/uni-simple-router';
export default {
setup(){
// 如果你正在使用 组合API 那么你可以使用 useRoute() 来获取
const route = useRoute();
console.log(route)
},
}
// xxxx.js
/**
* 如果你正在 js 文件中使用,你可以直接导入你创建的 router 实例
* 然后访问 currentRoute 属性即可
*/
import {
router } from '~@/router';
console.log(router.currentRoute)
// 任何地方
/**
* 另外你还可以直接访问挂载到uni上的 $Route 属性
* 它允许你在任何地方使用
*/
const route = uni.$Route
console.log(route)
在 uni-simple-router
V3
版本中,默认为 H5
端加载了转场动画引擎,这使得你能够在 H5
端实现类似于 APP
的转场动画效果。转场动画引擎允许你使用任何 CSS3
动画来创建自定义的转场动画效果。
animate.css
npm install animate.css --save
// App.vue
<script setup lang="ts">
import {
onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
console.log("App Launch");
});
</script>
<style>
@import "animate.css";
</style>
// router.js
import {
createRouter,
type platformRule
} from '@/uni-simple-router'
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM as platformRule,
h5: {
animation: {
// 什么动作下执行动画
includeNavtype: [`push`, `back`],
// 动画时长单位秒
animationTime: 0.3,
// 做动画的节点 整个应用都做
animationAppEl: `#app`,
// 默认做动画名
defaultAnimationType:`animate__slideInRight`,
// 装载的动画库
animationNodeMap: {
// 动画名
'animate__slideInRight': [
// 前进时触发的动画
[`animate__slideInRight`, `animate__slideOutLeft`],
// 后退时触发的动画
[`animate__slideInLeft`, `animate__slideOutRight`],
],
}
}
},
routes: [
//...
]
})
如需了解更多详细,请查阅官方文档H5转场动画
uni-simple-router
提供了导航路由锁的功能,它可以帮助你在特定情况下阻止路由的跳转,以避免在导航过程中再次进行导航。
路由错误码
自动解除路由锁
// router.js
const router = createRouter({
// 其他配置...
navigateLock:{
// 默认配置即是如下,无需二次配置
autoUnlock:[0,1,3,4,5,6,7,8,9]
},
// 路由配置...
});
如需了解更多详细,请查阅官方文档导航路由锁
在 uni-simple-router
中为解决导航方法中的 events
参数,诞生了上帝函数(God Function)。它是一种更高效的方式来进行页面间的通信。你可以使用它来完成传递参数、调用页面的方法、修改页面的数据等等。
使用上帝函数可以更方便地实现页面间的通信和操作,避免了传统的事件派发和监听的方式,提供了更高效和便捷的页面管理机制。
// xxxx.js
import {
parserInstance} from '@/uni-simple-router'
const result = parserInstance(`dashboard`,[
// 调用 `SettingsPage.vue` 实例任务
[
(instance)=>instance.getData(), `settings`
],
// 调用 `UsersPage.vue` 实例任务
[
(instance)=>instance.getData(), `users`
],
])
console.log(`执行结果:${
result}`)
如需了解更多详细,请查阅官方文档组件之间的通信
在 uni-simple-router
中,导航守卫(Navigation Guards
)是一组用于控制路由导航的钩子函数。它们可以在路由切换前、切换后以及切换过程中执行一些逻辑操作,用于实现权限控制、全局拦截、页面跳转等功能。
全局前置守卫
全局解析守卫
全局后置钩子
路由独享的守卫
组件内的守卫
示例
const router = createRouter({
... })
router.beforeEach((to, from) => {
// 执行一些全局逻辑操作
console.log('Before navigation');
// 进行权限验证或其他操作
if (!checkUserAuthenticated()) {
// 用户未登录,重定向到登录页或其他路由
return {
path: '/login' }
}
// 用户已经登录,继续导航
});
如需了解更多详细,请查阅官方文档导航守卫
文章浏览阅读1.1k次。一、选择题1. 串行接口是指( )。A. 接口与系统总线之间串行传送,接口与I/0设备之间串行传送B. 接口与系统总线之间串行传送,接口与1/0设备之间并行传送C. 接口与系统总线之间并行传送,接口与I/0设备之间串行传送D. 接口与系统总线之间并行传送,接口与I/0设备之间并行传送【答案】C2. 最容易造成很多小碎片的可变分区分配算法是( )。A. 首次适应算法B. 最佳适应算法..._874 计算机科学专业基础综合题型
文章浏览阅读9.7k次,点赞5次,收藏15次。连接xshell失败,报错如下图,怎么解决呢。1、通过ps -e|grep ssh命令判断是否安装ssh服务2、如果只有客户端安装了,服务器没有安装,则需要安装ssh服务器,命令:apt-get install openssh-server3、安装成功之后,启动ssh服务,命令:/etc/init.d/ssh start4、通过ps -e|grep ssh命令再次判断是否正确启动..._could not connect to '192.168.17.128' (port 22): connection failed.
文章浏览阅读209次。00000000_杰理 空白芯片 烧入key文件
文章浏览阅读475次。2023年初,“ChatGPT”一词在社交媒体上引起了热议,人们纷纷探讨它的本质和对社会的影响。就连央视新闻也对此进行了报道。作为新传专业的前沿人士,我们当然不能忽视这一热点。本文将全面解析ChatGPT,打开“技术黑箱”,探讨它对新闻与传播领域的影响。_引发对chatgpt兴趣的表述
文章浏览阅读259次。用Python数据分析方法进行汉字声调频率统计分析木合塔尔·沙地克;布合力齐姑丽·瓦斯力【期刊名称】《电脑知识与技术》【年(卷),期】2017(013)035【摘要】该文首先用Python程序,自动获取基本汉字字符集中的所有汉字,然后用汉字拼音转换工具pypinyin把所有汉字转换成拼音,最后根据所有汉字的拼音声调,统计并可视化拼音声调的占比.【总页数】2页(13-14)【关键词】数据分析;数据可..._汉字声调频率统计
文章浏览阅读64次。最近在做一个android系统移植的项目,所使用的开发板com1是调试串口,就是说会有uboot和kernel的调试信息打印在com1上(ttySAC0)。因为后期要使用ttySAC0作为上层应用通信串口,所以要把所有的调试信息都给去掉。参考网上的几篇文章,自己做了如下修改,终于把调试信息重定向到ttySAC1上了,在这做下记录。参考文章有:http://blog.csdn.net/longt..._嵌入式rootfs 输出重定向到/dev/console
文章浏览阅读1.2k次,点赞4次,收藏12次。1,先去iconfont登录,然后选择图标加入购物车 2,点击又上角车车添加进入项目我的项目中就会出现选择的图标 3,点击下载至本地,然后解压文件夹,然后切换到uniapp打开终端运行注:要保证自己电脑有安装node(没有安装node可以去官网下载Node.js 中文网)npm i -g iconfont-tools(mac用户失败的话在前面加个sudo,password就是自己的开机密码吧)4,终端切换到上面解压的文件夹里面,运行iconfont-tools 这些可以默认也可以自己命名(我是自己命名的_uniapp symbol图标
文章浏览阅读1.2w次,点赞25次,收藏192次。char*和char[]都是指针,指向第一个字符所在的地址,但char*是常量的指针,char[]是指针的常量_c++ char*
文章浏览阅读930次。代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大、灵活的编辑器,相信你和我一样,都不会例外。我用过的编辑器不少,真不少~ 但却没有哪款让我特别心仪的,直到我遇到了 Sublime Text 2 !如果说“神器”是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号。它小巧绿色且速度非
文章浏览阅读4.1k次。一、选择法这是每一个数出来跟后面所有的进行比较。2.冒泡排序法,是两个相邻的进行对比。_对十个数进行大小排序java
文章浏览阅读2.9k次。物联网开发笔记——使用网络调试助手连接阿里云物联网平台(基于MQTT协议)其实作者本意是使用4G模块来实现与阿里云物联网平台的连接过程,但是由于自己用的4G模块自身的限制,使得阿里云连接总是无法建立,已经联系客服返厂检修了,于是我在此使用网络调试助手来演示如何与阿里云物联网平台建立连接。一.准备工作1.MQTT协议说明文档(3.1.1版本)2.网络调试助手(可使用域名与服务器建立连接)PS:与阿里云建立连解释,最好使用域名来完成连接过程,而不是使用IP号。这里我跟阿里云的售后工程师咨询过,表示对应_网络调试助手连接阿里云连不上
文章浏览阅读544次,点赞5次,收藏6次。运算符与表达式任何高级程序设计语言中,表达式都是最基本的组成部分,可以说C++中的大部分语句都是由表达式构成的。_无c语言基础c++期末速成