关于vue-router的问题

Question

<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的嵌套或者有别的方法实现单独的登录界面么？

Answer 1

我来分享一下我的做法：

<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>外面还有一些东西的话，可以在钩子里判断是否需要将他们先隐藏。