菜菜菜的 Vue 30天 - Day23

SPA

好的～今天要來介紹的是 Vue-router

這要先來說一下 Vue 這個框架產生的網頁是 SPA 的架構也就是所謂的一頁式網頁。

那為什麼會說是一頁式呢？！

一般的網頁在每個路由的頁面都是一個獨立的檔案，但 SPA 架構的網頁是只有一個頁面(HTML)，再切換不同的路由時會去指定該路由會由哪個 component 做渲染，所以從頭到尾都是 JS 控制抽換 component，這也導致搜尋引擎無法事先爬到網頁內容，因此 SEO 會比較不好。

vue-router

話題拉回來～上面有說到使用 vue-router 切換路徑會去指定要顯示的 component，就來看看大致上的架構會是如何。

先來看一下 router 資料夾下的 index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

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

因為我們是使用 vie-cli 做專案的建立，裡面已經先幫我們做好最基本的設定。

如果是自己安裝 vue-router 要使用的話我們要做的第一步就是將 Vue 實例引入進來，並且使用Vue.use(Router)，這樣子 Vue 才會去使用這個套件。

再來我們要宣告一個 Router 的實例，我們就能在裡面開始撰寫我們的路由。

routes

因為會配置許多的路由，所以在 Router 實例裡面建立一個 routes 的陣列，裡面就可以配置多個路由。

每個路由最基本必須要有 2 個東西 path 跟 component。

path：應該不用多說，配置路由最重要的就是路徑了
component：指定要在該路徑顯示的頁面 component，在指定 component 前必須事先將該 component 引入才能夠指定。

那一開始初始配置還有一個 name，這是將這個路徑命名，也就是給它個名字，這後面再來講解為什麼要給它命名。

以上就是 vue-cli 裡的 vue-router 在專案初始時的配置，下一章再來講解 vue-router 其他更詳細的功能。