---
tags: Vue
---
# Vue Router

### history mode 和 hash mode 不同處

建立專案後，打包專案及使用python 建立server

npm run build
cd dist
python -m SimplpeHTTPServer 3000 //mac 內建python 可建立小型server

前往localhost:3000及貼上localhost:3000/about試試
server沒有在router做對應的路徑的話，使用history mode，部署上去後，使用者直接貼路徑會找不到(根路徑以外的網址，e.g.貼上localhost:3000/about，會404，因為路由找的是/about這個檔案

使用hash mode的話，就不管什麼網址，都會先導到根目錄進去

如何在部署後使用history mode?
以Node.js/Express.js 為例，在app.js中設定[connect-history-api-fallback](https://www.npmjs.com/package/connect-history-api-fallback)這個middleware，細節可參考[官方文件說明](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations)

---

### route 寫法比較

Bad:

  <router-link to="/about">
    About
  </router-link>

Good:

  <router-link :to="{ name: 'about' }">
    About
  </router-link>

使用[Named Route](https://router.vuejs.org/guide/essentials/named-routes.html)的話，往後改變route時(e.g. '/about' => '/aboutus')，只要去router的index.js更改一次就好，不需要改整個專案中的route。

---

### [Nested Routes](https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes)

當畫面沒有改變但有變化且希望route url改變時可以使用children
e.g.使用者點選link出現modal，可以把link放在children中

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})