一凸丸、vue-router

1.安裝
npm install vue-router -D
2.使用
vue-router 是一個(gè)插件，需要在 Vue 的全局引用中通過(guò) Vue.use()將它引用到 Vue 實(shí)例當(dāng)中袱院。在我們的工程中甲雅。main.js是程序入口文件，所有的全局性配置都會(huì)放在這里面坑填。
3.路由配置
頁(yè)面就是組件，那么一個(gè)路由定義就該與一個(gè)組件相對(duì)應(yīng)弛姜。第一個(gè)頁(yè)面應(yīng)該是“首頁(yè)”脐瑰，也就是默認(rèn)路由。
4.配置一個(gè)簡(jiǎn)單的路由
準(zhǔn)備兩個(gè)頁(yè)面廷臼，格式相同即可：

    <!--/Home.vue-->
    <template>
        <div>Home</div>
    </template>
    <style></style>
    <script>
        export default {}
    </script>

在 main.js 中

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

在 router.js 中配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Explorer from '@/components/Explorer'
import Cart from '@/components/Cart'
import Me from '@/components/Me'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }, {
      path: '/explorer',
      name: 'explorer',
      component: Explorer
    }
  ]
})

以后凡是遇到配置文件苍在，就可以單獨(dú)配置，在 main.js 中僅引用配置到全局變量荠商。

二寂恬、路由的模式

1.URL

• history 地址模式：http://localhost/home
• 非 history 地址模式：http://localhost/#home
  2.三種模式詳解
• Hash：使用 URL hash 值來(lái)作為路由。支持所有瀏覽器辖试，包括不支持 HTML5 History API 的瀏覽器涕蜂。
• History：依賴(lài) HTML5 History API 和服務(wù)器配置专酗。查看 HTML5 History 模式。
• Abstract：支持所有 JavaScript 運(yùn)行環(huán)境牙咏，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒(méi)有瀏覽器 API嘹裂，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式妄壶。
  模式配置方式：

export default new VueRouter({
    mode: 'history',
    routes: [
        {
          path: '/home',
          name: 'home',
          component: Home
        }, {
          path: '/explorer',
          name: 'explorer',
          component: Explorer
        }
      ]
    })

三、路由與導(dǎo)航

1.vue-router 提供的兩個(gè)指令標(biāo)簽

• <router-view>——渲染路徑匹配到的視圖組件寄狼，它還可以?xún)?nèi)嵌自己的<router-view>丁寄，根據(jù)嵌套路徑渲染嵌套組件。
• <router-link>——支持用戶(hù)在具有路由功能的應(yīng)用中（點(diǎn)擊）導(dǎo)航。

    <template>
      <div id="app">
        <div class="tabs">
          <ul>
            <li>
              <router-link :to="{ name : 'home' }">
                Home
              </router-link>
            </li>
            <li>
              <router-link :to="{ name : 'explorer' }">
                Explorer
              </router-link>
            </li>
          </ul>
        </div>
    
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </template>

使用<router-link :to="{ name : 'explorer' }">的形式而不用<router-link :to="/explorer">伊磺，給每一個(gè)路由取一個(gè)名字盛正，避免更改路由時(shí)需要再改導(dǎo)航的路徑。
2.指定輸出元素
不指定輸出元素時(shí)奢浑，代碼最終的輸出結(jié)果會(huì)是：

<ul>
    <li>
       <a href="#>
          <div>Home</div>
       </a>
     </li>
      <li>...</li>
</ul>

其實(shí)我們并不需要<a>標(biāo)簽蛮艰，可以通過(guò)屬性指定我們可以直接輸出到<li>標(biāo)簽上節(jié)省出更多的代碼。<router-link :to="{ name : 'home' }" tag="li">

3.動(dòng)態(tài)路由

routes:[{
    name: 'BookDetails',
    path: '/book/:id',
    component: BookDetails
}]

在參數(shù)名之前加上“:”雀彼，然后將參數(shù)寫(xiě)在路由的 path 內(nèi)壤蚜。
在<router-link>中我們可以加入一個(gè) params 的屬性來(lái)指定具體的參數(shù)值：

<router-link :to="{name: 'BookDetials', params: { id : 1 }" >
</router-link>

參數(shù)值的讀取方式：

export default {
    created () {
        const bookID = this.$router.params.id
    }
}

使用路由參數(shù)時(shí)，例如從/books/1導(dǎo)航到/books/2徊哑，原來(lái)的組件實(shí)例會(huì)被復(fù)用袜刷，比起銷(xiāo)毀再創(chuàng)建復(fù)用則顯得更加高效，不過(guò)莺丑，這也意味著組件的生命周期鉤子不會(huì)被重復(fù)調(diào)用著蟹，也就是說(shuō)created、mounted 等鉤子函數(shù)在頁(yè)面第二次加載時(shí)會(huì)失效梢莽。那么萧豆，當(dāng)組件復(fù)用時(shí)，想對(duì)路由參數(shù)的變化做響應(yīng)的話(huà)昏名，就需要在 watch 對(duì)象唄添加$route 對(duì)象變化的跟蹤函數(shù):

export default {
    template: '...',
    watch: {
        '$route' (to, from) {
            // 對(duì)路由變化作出響應(yīng)
        }
    }
}

4.前套路由
在 route.js 的配置中涮雷，要顯示子視圖與子路由的對(duì)應(yīng)。利用 children 數(shù)組屬性就可以定義子路由了轻局。

routes:[{
    name: 'Main',
    path: '/',
    component: Main,
    children: [
        {name: 'Home', path: 'home', component: Home,}
    ]
}]

子路由中的路徑就不需要加上"/"了洪鸭，生成時(shí)主路由的 path 會(huì)被自動(dòng)添加到自路由前。另外仑扑，以"/"開(kāi)頭會(huì)被當(dāng)做根路徑览爵，就不要加"/"了。

5.切頁(yè)動(dòng)畫(huà)
Vue 提供了 transition 的封裝組件镇饮。
有4個(gè)（CSS）類(lèi)名在 enter/leave 的過(guò)度中切換：

• CSS 類(lèi)名-enter
• CSS 類(lèi)名-enter-active
• CSS 類(lèi)名-leave
• CSS 類(lèi)名-leave-active

四蜓竹、導(dǎo)航狀態(tài)樣式

當(dāng)用戶(hù)點(diǎn)擊 Tabs 上的任意一個(gè)標(biāo)簽組件時(shí)，組件應(yīng)該進(jìn)入一個(gè)“激活”狀態(tài)盒让。在默認(rèn)情況下<router-link>對(duì)應(yīng)的路由匹配成功梅肤，就會(huì)自動(dòng)設(shè)置 class 屬性值為.router-link-active，如果我們想設(shè)置“激活”狀態(tài)樣式類(lèi)名為 active邑茄，可以通過(guò) active-clas 屬性進(jìn)行設(shè)置姨蝴。

<router-link :to=" { name: 'Home' } "
                    active-class="active" >
</router-link>

但如果要在頁(yè)面上這樣顯示聲明，每一個(gè)都寫(xiě)一個(gè)肺缕，這樣就不 DRY 了左医。所以授帕，可以在 router.js 中配置一下語(yǔ)句：

const router = new VueRouter ({
    // ...省略
    linkActiveClass: "active"
})

樣式激活是依據(jù)對(duì) URL 的全包含匹配，也就意味這"/"跳轉(zhuǎn)到別的路由依舊會(huì)保持“激活”狀態(tài)浮梢。在這種情況下就需要使用精確匹配模式跛十，使用 exact 屬性。

<router-link :to=" { name: 'Home' } " exact>
</router-link>

五秕硝、History 的控制

當(dāng)我們?cè)谑褂?HTML5的 History 模式的時(shí)候芥映，每次路由的改變都會(huì)被“推”（push）到導(dǎo)航歷史中保留，在某些情況下我們并不需要瀏覽器這樣做远豺，而是希望他能將原有的記錄進(jìn)行替換奈偏。
首先，需要了解<router-link> 用兩種屬性來(lái)調(diào)用 Vue 實(shí)例內(nèi)$router 對(duì)象的三個(gè)方法：

設(shè)置 replace 就會(huì)調(diào)用 router.replace() 而不是 router.push()躯护，于是導(dǎo)航后就不會(huì)留下 History 記錄惊来。

<router-link :to=" { name: 'Home' } " replace>
</router-link>

設(shè)置 append 屬性后，則在當(dāng)前（相對(duì)）路徑前添加基本路徑棺滞。例如裁蚁，從 /a 導(dǎo)航到相對(duì)路徑 b，如果沒(méi)有配置 append继准，則路徑為 /b枉证，如果配置了，則為 /a/b移必。

六刽严、關(guān)于 Fallback

當(dāng)使用 History 模式的時(shí)候，點(diǎn)擊<router-link>會(huì)自動(dòng)調(diào)到相應(yīng)的路徑避凝，但是在瀏覽器直接輸入" http://loacalhost/home"則會(huì)404，因?yàn)闉g覽器直接將這個(gè)地址發(fā)向服務(wù)器眨补。
解決辦法是將所有發(fā)到服務(wù)器端的請(qǐng)求利用服務(wù)器端的 URLRewrite 模板重新轉(zhuǎn)發(fā)給/index.html管削。
常見(jiàn)：
Apache
在配置文件中加入 URLRewrite模塊配置
Nginx
將404頁(yè)面自動(dòng)重定向到/index.html
Node.js(Express)
安裝 Fallback 插件
注意
一旦配置，服務(wù)器將不再返回404錯(cuò)誤頁(yè)面撑螺，為避免這種情況含思，應(yīng)該在 Vue 應(yīng)用里覆蓋所有的路由情況，然后在給出一個(gè)404頁(yè)面甘晤。

const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '*', component: NotFoundComponent}
    ]
})