Vue.js에서 SPA - [12] 로그인 : 단일 창에서 투 창으로 화면 전환

만든 로그인 화면(싱글 페인)에서 메인 화면(투페인)으로의 전환을 만드는 회. 그림으로 하면 자주 있는 다음과 같은 느낌.

이번은 어디까지나 화면 천이의 방법의 이야기이므로, 인증되고 있는지 어떤지를 판정하는 처리 등은 아마 또 이번에 쓴다

스크린샷

이하의 코드 그대로는 아니지만, 이런 분위기의 화면 천이가 생겼다

화면 전환

    ログイン画面 (Single pane)                メイン画面 (two pane)
 +-------------------------------+      +-------------------------------+
 |         +-----------+         |      | Logo                          |
 |    Name |           |         |      +-------------------------------+
 |         +-----------+         |      |            |                  |
 |                               |      | Navigation |    Main-pane     |
 |         +-----------+         | >>>> | Pane       |                  |
 |    Pass |           |         |      |            |                  |
 |         +-----------+         |      |            |                  |
 |                   +--------+  |      |            |                  |
 |                   | Login  |  |      |            |                  |
 |                   +--------+  |      |            |                  |
 +-------------------------------+      +-------------------------------+

Vue 같은 방법?

방법은 몇 가지 있습니다. 이번은, 중첩된 경로 라고 하는 것을 사용해 실장. 공식적으로 있기 때문에, 어쩌면 이것이 Vue 같은 방법이겠지

중첩되지 않은 경로(지금까지)

지금까지는 로그인 화면이 없어 메인 화면 밖에 만들지 않았다. 그 메인 화면에서는 vue-router를 사용하여 Navigation Pane의 아이템을 클릭하면 그에 따라 Main Pane의 컴포넌트(콘텐츠)가 바뀐다는 것을 하고 있었다. Main Pane 곳을 <router-view></router-view><router-view></router-view> 하나만

screen-layout

+------------------ main.html ------------------+ 
| Logo                                          | 
+------------+----------------------------------+ 
|            |                                  | 
| Navigation |    Main Pane                     | 
| Pane       |  <router-view></router-view>     | 
|            |  component Foo か Bar を切り替え   | 
|            |                                  | 
+-----------------------------------------------+

main.html

<el-container>
  <el-header>
    <img src="img/logo.png" height="60" align="left">
  </el-header>
  <el-container>
    <el-aside width="80px">
      <el-col>
        <el-menu default-active="1" class="el-menu-vertical">
          <el-menu-item index="1">
            <router-link to="/foo"><i class="fas fa-map-marker-alt fa-2x"></i></router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/bar"><i class="fas fa-door-open fa-2x"></i></router-link>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>

    <el-main>
      <!-- router-viewはひとつだけ -->
      <router-view></router-view> 
    </el-main>
  </el-container>
</el-container>

vue-router

const Foo = { template: '<div>FOO</div>' }
const Bar = { template: '<div>BAR</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

var vm = new Vue({
  router, 
  el: '#app'
})

중첩된 루트(이번)

이번에 하고 싶은 일을 위해서 중첩된 루트를 사용하는 경우, 이하와 같이 <router-view></router-view> 를 중첩한다.
(1) 로 로그인 화면과 메인 화면을 전환하면서 (2) 로 메인 화면 안의 컴포넌트를 전환하면 된다

nested-screen-layout

+-------------- index.html -------------------------+
|  <router-view></router-view> (1)                  |
|  component Login か TwoPane を切り替え              |
| +------------ three-pane.html ------------------+ |
| | Logo                                          | |
| +------------+----------------------------------+ |
| |            |                                  | |
| | Navigation |    Main Pane                     | |
| | Pane       |  <router-view></router-view> (2) | |
| |            |  component Foo か Bar を切り替え   | |
| |            |                                  | |
| +-----------------------------------------------+ |
+---------------------------------------------------+

index.html

<div id="app">
  <!-- (1) ネストの外側のrouter-view -->
  <router-view></router-view> 
</div>

vue-router


const Login = { template: '<login></login>' }
const TwoPane = { template: '<two-pane></two-pane>' }
const Foo = { template: '<div>FOO</div>' }
const Bar = { template: '<div>BAR</div>' }

const routes = [
  { path: '/', component: TwoPane,
    // ネストされたルートは children として定義
    children: [
      {
        path: 'foo',
        component:Foo
      },
      {
        path: 'bar',
        component: Bar
      }
    ]
  },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  routes
})

var vm = new Vue({
  router, 
  el: '#app'
})

컴포넌트

two-pane.js

Vue.component('two-pane', {
  template: `
    <el-container>
      <el-header>
        <img src="img/logo.png" height="60" align="left">
      </el-header>
    <el-container>
      <el-aside width="80px">
        <el-col>
          <el-menu default-active="1" class="el-menu-vertical">
            <el-menu-item index="1">
              <el-tooltip class="item" effect="dark" content="Data centers" placement="right">
                <router-link to="/foo"><i class="fas fa-map-marker-alt fa-2x"></i></router-link>
              </el-tooltip>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/bar"><i class="fas fa-door-open fa-2x"></i></router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>

      <el-main>
        <!-- (2) ネストの内側のrouter-view -->
        <router-view></router-view> 
      </el-main>
    </el-container>
  </el-container>
  `
})

Vue.component('two-pane', {
  methods: {
    onSubmit() {
      router.push('url-to-go-after-login')
    }
  },
  template: `
    <!-- なんらかのログイン画面のHTML -->
  `
})