vue-router 基本使用
一.vue-router的理解
路由，其實就是指向的意思，當我點擊頁面上的goods按鈕時，頁面中就要顯示goods的內容，如果點擊頁面上的ratings按鈕，頁面中就要顯示ratings的內容。goods按鈕 => goods內容， ratings按鈕 => ratings內容，也可以說是一種映射. 所以在頁面上有兩個部分，一個是點擊部分，一個是點擊之後，顯示內容的部分。
點擊之後，怎麽做到正確的對應，比如，我點擊goods按鈕，頁面中怎麽就正好能顯示goods的內容。這就要在js 文件中配置路由。
路由中有三個基本的概念 route, routes, router:
1.route它是一條路由，由這個英文單詞也可以看出來，它是單數， goods按鈕 => goods內容， 這是一條route, ratings按鈕 => ratings內容， 這是另一條路由。
2.routes是一組路由，把上面的每一條路由組合起來，形成一個數組。[{goods按鈕 =>goods內容 }， { ratings按鈕 => ratings內容}]
3.router 是一個機制，相當於一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪裏是靜止的，當真正來了請求，怎麽辦？ 就是當用戶點擊goods按鈕的時候，怎麽辦？這時router 就起作用了，它到routes 中去查找，去找到對應的goods內容，所以頁面中就顯示了goods內容。
4.客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候，about 中的內容全部隱藏，反之也是一樣。客戶端路由有兩種實現方式：基於hash 和基於html5 history api。
二.vue-router的實現
在vue中實現路由還是相對簡單的。因為我們頁面中所有內容都是組件化的，我們只要把路徑和組件對應起來就可以了，然後在頁面中把組件渲染出來。
1.顯示頁面實現（App.vue）
<template>
<div>
<v-header :seller="seller"></v-header>
<div class="tab border-1px">
<div class="tab-item">
<a v-link="{path:‘/goods‘}">商品</a>
</div>
<div class="tab-item">
<a v-link="{path:‘/ratings‘}">評論</a>
</div>
<div class="tab-item">
<a v-link="{path:‘/seller‘}">商家</a>
</div>
</div>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
</template> 在這裏面我們看到我們定義了一種標簽<router-view></router-view>以及一種在標簽裏面定義的指令v-link（在a元素上使用v-link指令跳轉到指定路徑），來對應顯示和點擊部分（即點擊後顯示到哪裏，路由匹配到的組件將渲染在這裏）。
2.配置界面實現（main.js）
import Vue from ‘vue‘; import VueRouter from ‘vue-router‘; import VueResouce from ‘vue-resource‘; import App from ‘./App.vue‘; import goods from ‘components/goods/goods.vue‘; // 1. import ratings from ‘components/ratings/ratings.vue‘; import sellers from ‘components/seller/seller.vue‘; import ‘common/stylus/index.styl‘; // 如果想利用絕對路徑的話必須要在配置文件中進行配置 // 如果需要使用vue-router的功能，需要進行如下步驟： // 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter) // 1. 定義（路由）組件。可以從其他文件 import 進來. // 2. 定義路由。每個路由應該映射一個組件。 其中"component" 可以是通過 Vue.extend() 創建的組件構造器，或者，只是一個組件配置對象。 // 3. 創建 router 實例，然後傳 `routes` 配置.
// 4. 映射路由
// 5. 創建和掛載根實例,啟動。
Vue.use(VueRouter); // 0. Vue.use(VueResouce); // 進行一個全局註冊，在引用進來的第三方插件都要在這裏註冊和配置 let app = Vue.extend(App); // 2. let router = new VueRouter({ linkActiveClass: ‘active‘ }); // 3.
// 4. router.map({ ‘/goods‘: { component: goods }, ‘/ratings‘: { component: ratings }, ‘/seller‘: { component: sellers } }); router.start(app, ‘#app‘); // 5.掛載並啟動路由 router.go(‘/goods‘);
首先先引入需要用到的vue以及插件vue-router，然後要調用 Vue.use(VueRouter)。其次我們需要定義（路由）組件。可以從其他文件 import 進來。
之後然後創建組件構造器（當在模板中遇到該組件作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生產組件實例，並掛載到自定義元素上）Vue.extend()方法。然後創建 router 實例，可以對 `routes`進行相應配置。接著我們映射路由。調用router的map方法映射路由，每條路由以key-value的形式存在，key是路徑，value是組件。例如：‘/goods‘是一條路由的key，它表示路徑component: goods則表示該條路由映射的組件。之後我們就可以掛載並啟動路由了。路由器的運行需要一個根組件，router.start(app, ‘#app‘)表示router會創建一個App實例，並且掛載到#app元素。註意：使用vue-router的應用，不需要顯式地創建Vue實例，而是調用start方法將根組件掛載到某個元素。下面就是掛載點的代碼，目錄結構中index.html.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sell</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <!--移動端是不能被縮放的，還有一些初始的移動端的寬高設置--> <!--mete標簽的於用法 viewport主要是影響移動端頁面布局的 content 參數：1.width viewport 寬度(數值/device-width)；2.height viewport 高度(數值/device-height)3.initial-scale 初始縮放比例4.maximum-scale 最大縮放比例5.minimum-scale 最小縮放比例6.user-scalable 是否允許用戶縮放(yes/no) --> <link rel="stylesheet" type="text/css" href="static/css/reset.css"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
上面的6個步驟，可以說是創建一個單頁面應用的基本步驟：
JavaScript
- 創建組件：創建單頁面應用需要渲染的組件
- 創建路由：創建VueRouter實例
- 映射路由：調用VueRouter實例的map方法
- 啟動路由：調用VueRouter實例的start方法
HTML
- 使用v-link指令
- 使用<router-view>標簽
vue-router 基本使用