qiankun配置后路由守卫失效
时间: 2023-07-11 21:39:17 浏览: 68
qiankun 是一个微前端框架,它支持多个独立的子应用在同一个页面上运行。在 qiankun 中配置路由守卫时,需要注意以下几点:
1. 确保在主应用和子应用中都正确配置了路由守卫,包括 beforeEach、beforeResolve 和 afterEach 函数。
2. 在主应用中,需要在注册子应用时,使用 `registerMicroApps` 函数中的 `beforeLoad` 钩子函数来配置路由守卫。例如:
```javascript
registerMicroApps([
{
name: 'sub-app',
entry: '//localhost:8000',
beforeLoad: (app) => {
app.router.beforeEach((to, from, next) => {
// ...
})
}
}
])
```
3. 在子应用中,需要在路由实例化之前,手动调用 `beforeEach` 和 `afterEach` 函数来配置路由守卫。例如:
```javascript
import router from './router'
router.beforeEach((to, from, next) => {
// ...
})
router.afterEach((to, from) => {
// ...
})
```
如果你已经按照以上步骤配置了路由守卫,但是路由守卫失效了,可能是因为你在子应用中使用了 `Hash` 模式的路由,而 qiankun 默认使用 `History` 模式的路由。你可以在子应用的路由配置中,将 mode 改为 'hash',例如:
```javascript
const router = new VueRouter({
mode: 'hash',
routes: [...]
})
```
希望能帮助到你!
阅读全文