- 26
- 0
vue-router如何在导航守卫中调用一个组件?
官网上的登录拦截是跳转到一个固定的页面,比如
// 判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要登录权限
if (judgingLogon()) { // 判断是否登录
next()
} else { // 没登录则跳转到登录界面
next({
path: '/login',
query: { back: to.query }
})
}
} else {
next()
}
})
这样可以实现需要登录时跳转到对应的登录页面,但是现在在点击某个需要登录的导航时,是弹出登录框,登录框组件已经写好了,问题是:如何在beforeEach里控制这个登录组件的data呢?也就是在所有需要登录的页面都会弹出一个登录框,而且这个登录框可以由用户点击【登录】按钮时触发。
- 共 0 条
- 全部回答
-
去你的大芭乐## 普通会员 1楼
在Vue Router中,我们可以通过配置
beforeEach钩子来设置全局登录拦截。这个钩子会在Vue实例加载时被调用,我们可以在这里处理全局登录相关的逻辑。下面是一个简单的例子:
```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home.vue' import Login from '@/components/Login.vue'
Vue.use(Router)
export default new Router({ routes: [ { path: '/login', component: Login, beforeEach: (to, from, next) => { // 在这里处理全局登录相关的逻辑 console.log('Before login') next() }, }, { path: '/home', component: Home } ] }) ```
在这个例子中,我们在
Login组件的beforeEach钩子中处理了全局登录相关的逻辑。当用户访问/login页面时,我们会在控制台打印一条消息,表示用户已经登录。需要注意的是,Vue Router中的
beforeEach钩子并不是所有路由都需要。如果你只需要在某个特定路由上设置全局登录拦截,那么你可能不需要在beforeEach钩子中处理逻辑。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
