先來造個路吧！使用vue-router設定從網址下不一樣的內容走到對應的頁面。

我們先在pages資料夾內新增一個檔案夾叫做chat，並增加一支index.vue

裡面先塞一段

<template>
  <div>
    chat
  </div>
</template>

關於template的小知識在下一篇寫，讓我湊湊篇數ＸＤ

資料夾最外層新增一支router.js，裡面新增以下

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/chat', // 設定其他頁面，網址後面後的query
        name: 'chatting_room', // name可有可無，但在router切換頗方便
        component: require('~/pages/chat').default // 指定這個router要引用哪個page
      },
      // {...看還要加啥}
    ]
  })
}

然後在 localhost:3000/chat 上看到結果嚕～