前端路由，將本來根據地址請求後端返回頁面，變為了前端直接重新渲染頁面。

優點：使用者體驗好，不需要每次都從伺服器全部獲取，快速展現給使用者

缺點：不利於SEO；使用瀏覽器的前進、後退鍵會重新發送請求，沒有合理地利用快取；單頁面無法記住之前滾動的位置，無法在前進、後退的時候記住滾動的位置。

vue-router 是構建vue SPA的關鍵

通常，我們使用<router-link></router-link> 與<router-view></router-view> 。

<router-link> 負責路由的跳轉，它的 “to” 屬性指定跳轉的地址。

<router-view> 負責路由的渲染。

認識一點，vue-router 就是對瀏覽器中提供的history API 的封裝，感興趣可以瞭解history API。

動態路由匹配

動態路由，是指路由地址中含有變數的那種路由，比如下面

下面是一個動態路由的例子。

首先我們先寫個普通路由。

頁面，程式碼如下。

<template>
  <div>這是商品列表頁</div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>
 

router資料夾下 index.js 程式碼如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

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

就好啦。啟動一下伺服器就可以看到啦。

下面我們做一個動態路由的例子。

首先，我們規定一個url 地址，下面是router 資料夾下的index.js 程式碼。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

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

然後我們在GoodList.vue 中修改程式碼，如下。

<template>
  <div>
    這是商品列表頁
    <span>{{$route.params.goodsId}}</span>
  </div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>

如上，複合規則的url 將會改變頁面。

再複雜一些的動態路由，router/index.js如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/goods/:goodsId／user/:name',
    name: 'GoodList',
    component: GoodList
  }]
})

GoodList.vue 程式碼如下。

<template>
  <div>
    這是商品列表頁
    <span>{{$route.params.goodsId}}</span>
    <br />
    <span>{{$route.params.name}}</span>
  </div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>

好啦。

可以看到，在位址列，我們的地址是這樣的： http://localhost:8080/#/goods/89/user/nnn

有一個“#” 號。這實際上是一種路由的雜湊。地址可以分兩種模式：history（直接用url 地址），雜湊（預設，hash）。

這個在router 下面的index.js 中是可以修改的。如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
    path: '/goods/:goodsId/user/:name',
    name: 'GoodList',
    component: GoodList
  }]
})

然後，就可以用這種地址 http://localhost:8080/goods/89/user/nnn 訪問了。