uniapp 路由拦截
时间: 2025-01-02 11:36:38 浏览: 10
### 实现 UniApp 路由拦截
为了在 UniApp 中实现路由拦截,最佳实践是利用 `uni-simple-router` 插件来增强原生的路由机制。这使得开发者能够在每次页面切换时执行特定逻辑,比如权限验证或加载动画。
#### 安装依赖包
首先,在项目根目录下安装所需的 npm 包:
```bash
npm install uni-simple-router --save
```
#### 初始化配置
接着,在项目的入口文件 `main.js` 中引入并初始化该插件:
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import uniSimpleRouter from 'uni-simple-router'
Vue.config.productionTip = false;
// 注册 uni-simple-router 并传入路由表
Vue.use(uniSimpleRouter, {
routes: router.routes(),
});
new Vue({
render: h => h(App),
}).$mount('#app');
```
#### 设置全局前置守卫
通过设置全局前置钩子函数,可以在任何页面跳转之前触发指定的操作。下面是一个简单的例子展示如何进行登录状态检测[^2]:
```javascript
const router = new uniSimpleRouter();
router.beforeEach((to, from, next) => {
const isLogin = !!uni.getStorageSync('token'); // 判断是否有 token
if (to.meta.requiresAuth && !isLogin) {
// 如果目标页面需要认证而当前未登录,则重定向到登录页
next({ name: "login", query: { redirect: to.fullPath } });
} else {
next();
}
});
```
此段代码会在每一次导航发生前自动调用,并检查即将访问的目标路径是否设置了 `requiresAuth` 属性以及用户是否已登录。如果条件不满足,则会阻止默认行为并将用户导向至登录界面;反之则继续正常跳转。
阅读全文