vue-router是Vue.js官方的路由插件，適合用於構建單頁面應用。
vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。
傳統的頁面應用，是用一些超連接來實現頁面切換和跳轉的。
在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。

參考：https://www.cnblogs.com/keepfool/p/5690366.htmlcss

使用VueCLI，並加上vue-router插件的git案例：html

https://github.com/chentianwei411/vue-router-demovue

基礎

案例：git

https://jsfiddle.net/yyx990803/xgrjzsup/github

案例使用了局部組件註冊。vue-router

經過普通的JS對象來定義組件：編程

var Component = { ... }數組

而後在component(components)中定義想要使用的組件：瀏覽器

new Vue({
 el: '#app'
 components: {
 'component-a': ComponentA,
 'component-b': ComponentB
 }
})

通常使用VueRouter, 也可使用Router:app

import Router from "vue-router"; Vue.use(Router)

4大步驟：

JavaScript:

0. 若是使用一個模塊系統，調用Vue.use(VueRouter)
1. 定義組件（也能夠從其餘文件import）

2. 定義routes選項
每一個路徑須要map映射到一個組件。組件能夠用Vue.extend()建立，或者僅僅是一個組件選項對象。

3.建立router實例，而後傳遞routes選項
這裏，你能夠傳遞額外的選項。

HTML:
3.1. 使用router-link組件導航。用於渲染路徑匹配到的視圖組件。
- <router-link to="/foo">Go to Foo</router-link>
  - 經過‘to’ prop來知道連接
  - <router-link>將被渲染，默認渲染成<a>標籤
3.2.根據路徑，匹配的組件將會渲染在<router-view>.

4. 建立和掛載根實例
確保注入的路徑實例及路徑選項，可讓整個app router-aware

成功激活路由後，連接元素自動設置一個表示激活的css類名：.router-link-active {}

<router-link>知識點：

將激活class 用在外層元素:

<router-link tag="li" to="/foo">
　<a>Go to Foo</a>
</router-link>

成功激活routes後，自動生成的class,會添加到<li>標籤上，而不是<a>標籤。

<router-link> 組件的Props:

to

類型string | Location

當連接被點擊後，會當即把to的值傳遞給router.push()。

tag prop

指定使用什麼標籤，並監聽點擊，觸發導航。

動態路由匹配

例：用戶id不一樣，但都會渲染同一個組件User。可使用動態路徑參數：

routes選項是Router構建選項之一：

routes: [ { path: '"/user/:id", component: User }]

id根據用戶不一樣，值天然不一樣。當匹配一個路由時，參數值會被設置到this.$route.params, 它能夠在每一個組件中使用:

tempate: <div>User'id is {{ $route.params.id }}</div>

$route.params類型是Object, 一個key/value對象，若是沒有參數，就是一個空對象。

路徑參數：

模式/user/:id
匹配路徑/user/22
$route.params的參數是{id: 22}

響應路由參數的變化

當路由參數變化時，由於兩個路由使用的同一個組件User，因此原來的組件實例會反覆使用（效率高），

可是組件的Life cycle hook不會再被調用了。

若是但願在路由參數變化時，能夠監聽，用watch 監聽$route對象：

在組件中添加watch 數據選項：

Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每個屬性

var User = {
　template: `<div>點擊連接後生成的組件實例： {{ $route.params.id }}</div>`,
　watch: {
　　'$route': function (val, oldVal) {
　　　　console.log(val)

　　},
　}
}

高級匹配模式（未學習）

例如：可選的動態路徑參數，匹配0～N個，甚至自定義正則匹配。

嵌套路由

實際的應用界面，是由多層的嵌套的組件組合而成。

配合嵌套的組件， URL中各段動態路徑也按照某種結構對應它。

組件：一個被渲染的組件能夠包含本身的嵌套<router-view>, 即嵌套出口。
Router構建器：在routes構建選項中添加children數組。
- children包含當前路由的全部嵌套路徑片斷的路由記錄。
- 以 / 開頭的嵌套路徑會被看成根路徑。
- （可選）在chilren配置中設置一個空的路徑，path: ''，component: Home是對根路徑模版的擴展。

點擊查看個人案例https://codepen.io/chentianwei411/pen/BOJOVo

編程方式的導航

聲明方式：用<router-link>建立連接標籤。
編程方式：使用router的實例方法，經過編寫代碼來實現導航URL。

在Vue實例內部，能夠經過$router訪問路由實例。

vue-router插件提供了相關的API： router的實例方法,經過如下方法來導航到不一樣的URL。

push(location, onComplete?, onAbort?)，實際等同<router-link :to=''>
replace(location, onComplete?, onAbort?)
- 和push的區別是不記錄進history。
- 等同於<router-lin :to='xxx' replace>
go(n), 等同於window.history.go(n)
back(),
forward()

history棧：按前後順序記錄瀏覽器的訪問url。

HTML DOM中的History對象，包含了訪問的URLs。經過window.history特性操做它。

push,把訪問url記錄進history中，以後使用瀏覽器導航欄的前進，後退按鈕，就表明導向history中的URL

go(),back(),forward()都是對history操做。它們都是對window.history API的模仿。

字符串

router.push('home')

對象

router.push({ path: ''home' })　　　　若是帶動態參數 path: `home/${ userId}`, 生成/user/123

命名路由：給一個路由設一個名字

router.push({ name: 'user', params: {userId: 123}) 生成/user/123

帶查詢參數：

router.push({ path: 'register', query: { plan: 'private' }) 變成 /register?plan=private

命名路由

給一個路由一個名稱，更方便。

1.在建立Router實例時，在routes配置中給某個路由設置名字
2.要連接到一個命名路由，給router-link的to屬性傳入一個對象{name: 'xxx', params: {...}}

源代碼實例：https://router.vuejs.org/zh/guide/essentials/named-routes.html

命名視圖

用途：

一個窗口，同時同級展現多個視圖（如：導航欄，側邊欄，主內容等等），而不是嵌套展現。

一個窗口有多個單獨命名的視圖。使用一個路徑，這個路徑內有有多個平級的組件。

經過router-link中的name選擇，指定router-link顯示什麼組件。

例子：

// // // const routrer = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })

在路徑構建器中的routes選項中使用components配置（帶上字母s）：不然報錯

嵌套命名視圖

進一步，把嵌套路由和命名視圖結合使用。

在一個嵌套路由中，使用components屬性。而後在router-link中直接使用name屬性。

例子

 routes: [ { path: '/settings', // You could also have named views at tho top
 component: UserSettings,  children: [ { path: 'emails', component: UserEmailsSubscriptions },  { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } } ] } ]

重定向，別名(沒實際使用過)

別名：

/a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持爲 /b，可是路由匹配則爲 /a，就像用戶訪問 /a 同樣。

const router = new VueRouter({ routes: [ {path:'/a', component:A, alias: '/b'} ] })

<router-link to="/b">hello</router-link>
 URl顯示home/b,
但渲染的是組件A, /home/a。

路由傳遞參數（沒實際用過）

默認在組件中使用$route會限制組件的靈活性，讓這個組件只能用於某個肯定的URLs。

例子：組件User和'/user/:id'綁定了。

const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })

爲了讓組件能夠反覆使用和測試，

用props代替 $route.params, 若是props被設置爲true, 則route.params被設置爲組件屬性。

const User = {  props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 對於包含命名視圖的路由，你必須分別爲每一個命名視圖添加 `props` 選項：
 { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] })

還有對象模式和函數模式，具體見指南

歷史模式

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。

Transition

<router-view>是基本的動態組件，能夠給他添加動態效果。

具體見指南，和<transition>的API和相關指南。

vue-router

基礎