[Day23]

說明: 當要做single page application時，必須要有router才能將組件組合在一起。

一、設定vue-router

import Login from '../views/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

在router/index.js 檔案裡對router設定，這裡將login組件對應到login url上

Login.vue

<template>
  <div>
    <form method="post" class="loginForm"  @submit.prevent>
      帳號:<input type="text" name="username"/>
      <br>
      密碼:<input type="password" name="password"/>
      <br>
      <button class="btn" @click="submit">登入</button>
    </form>
  </div>
</template>

<script>
import request from "request";
const baseUrl = 'http://localhost:8080/api'

export default {
  data() {
    return {
      user:{
        username:'',
        password:''
      }
    }
  },
  methods: {
    submit() {
      //do something
    }
  }
}
</script>

二、router-view和router-link

<router-view></router-view>   
<router-link to='/login'>login</router-link>

在app.vue中必須提供一個組件提供router-view功能，讓其他組件能夠顯示在app.vue中。
或是 router-view中的name可以指定對應到的router name。

另外要連結到特定的組件，可設定router-link提供鏈結。

在這裡是使用default 的 mode，是hash，因此網址上會帶有#，
可改為history使用另一個方式除去#，但須後端伺服器配合。

參考來源:
https://medium.com/@linwei5316/vue-router-4c2aad1cc352

[Day23結束]