uniapp 路由插件
在UniApp中,路由管理通常依赖框架内置的页面跳转API,但若需要更高级的路由功能(如动态路由、拦截器等),可通过以下插件或方案实现:
路由插件推荐
uni-simple-router
专为UniApp设计的路由插件,支持类似Vue Router的配置方式,提供导航守卫、动态路由等功能。
安装方式:
npm install uni-simple-router
基础配置示例:
import { createRouter } from 'uni-simple-router';
const router = createRouter({
routes: [
{ path: '/home', component: '@/pages/home' }
]
});
uni-read-pages + 自定义路由
通过读取pages.json自动生成路由表,适合需要动态路由的场景。
安装:
npm install uni-read-pages
使用示例:
const { pages } = require('uni-read-pages');
const routes = pages.map(page => ({ path: `/${page.path}`, component: page }));
内置路由方法
UniApp本身提供以下API,无需插件即可完成基本跳转:
uni.navigateTo:保留当前页跳转。uni.redirectTo:关闭当前页跳转。uni.reLaunch:重启应用跳转。uni.switchTab:切换Tab页。
示例:
uni.navigateTo({ url: '/pages/home/home' });
路由拦截实现
通过全局监听onNeedLogin事件或重写跳转方法实现权限控制:
const originalNavigateTo = uni.navigateTo;
uni.navigateTo = function(options) {
if (needLogin(options.url)) {
return originalNavigateTo({ url: '/pages/login/login' });
}
originalNavigateTo(options);
};
注意事项
- 插件可能影响小程序端的性能,需测试兼容性。
- Tab页跳转需使用
switchTab,其他API无效。 - H5端可通过修改
manifest.json的router配置启用History模式。
以上方案可根据项目复杂度选择,轻度需求建议优先使用内置API。







