vue.js - 关于vue-router的问题
本文介绍了vue.js - 关于vue-router的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<div class="row">
<div class="col l2">
<side-nav></side-nav>
</div>
<div class="col s12 m12 l10">
<div class="row">
<nav-bar></nav-bar>
</div>
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
我如果需要一个单独的登录界面,只有通过验证之后才跳转到主页面。但是这样写的话登录的component会渲染到router-view,这样侧边栏和导航栏都会显示出来,有没有方法实现view的嵌套或者有别的方法实现单独的登录界面么?
解决方案
我来分享一下我的做法:
<template>
<div id="app">
<div class="body">
<router-view></router-view>
</div>
</div>
<auth v-ref:auth-view></auth>
</template>
这是我的App.vue
,其中,body
是App主要页面,auth
是登录界面。
然后我在main.js
中配置了下面这样的路由钩子:
router.beforeEach(transition => {
if (transition.to.name === 'index') {
transition.next()
} else {
let authView = router.app.$refs.authView
AuthService.check().then(
() => transition.next(),
() => authView.login().then(result => {
authView.hide()
transition.next()
})
)
}
})
我的首页不需要登录,所以为index
做了特殊判断,对于其他任何页面,先调用AuthService检查一下当前登录状态,成功的话就正常执行transition.next()
,否则就先弹出Auth
界面,登录成功再执行transition.next()
。authView.login()
和authView.hide()
都是<auth>
组件的自定义method
,login()
会将它显示,并且返回一个Promise
,这个Promise
将在登录成功时resolve
;hide()
会将它隐藏。
你的<router-view>
外面还有一些东西的话,可以在钩子里判断是否需要将他们先隐藏。
这篇关于vue.js - 关于vue-router的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文