什麼前端也可以做Router?

兩三年前的我還真的不知道，還用jquery硬幹過前後分離的網頁，使用者永遠都沒上一頁可以點XD
其實用起來跟後端的Router也沒差很多啦

views多加兩個頁面
views/Home.vue

<template>
  <div class="home">
    <h4>Home</h4>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
  }
}
</script>

views/Report.vue

<template>
  <div class="report">
    <h4>Report</h4>
  </div>
</template>

<script>

export default {
  name: 'Report',
  components: {
  }
}
</script>

設定Router的路徑，對應要用那一個vue頁面
router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/report',
    name: 'Report',
    component: () => import('../views/Report.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

來加一個nav bar

App.vue

  <div id="app">
    <div>
      <b-navbar toggleable="lg" type="light">
        <b-navbar-brand href="#">Tomato</b-navbar-brand>
        <b-navbar-nav>
          <b-nav-item><router-link to="/">Home</router-link></b-nav-item> 
          <b-nav-item><router-link to="/report">Report</router-link></b-nav-item> #點了就導去/report的頁面
        </b-navbar-nav>

        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="ml-auto" type="light">
            <b-nav-item-dropdown right>
              <template v-slot:button-content>
                <em>Guest</em>
              </template>
              <b-dropdown-item v-b-modal.modal-1>Sign In</b-dropdown-item>
            </b-nav-item-dropdown>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>

    <b-modal id="modal-1" title="Login">
      <h1>Google</h1>
    </b-modal>

    <br>

    <router-view/>

  </div>

看一下畫面
當點了Report的按鈕就會導去/report
browser可以正常回上一頁哦~

今天的commit

謝謝大家