Vue扣提供了插件機制，可以在全局添加 些功能。它們可以簡單到幾個方法、屬性，也可以
很複雜，比如 整套組件庫。本章將介紹幾個官方的核心插件，然後通過實戰來開發 個插件
註冊插件需要 個公開的方法 install ，它的第 個參數是 Vue 構造器，第 參數是一個可選
的選項對象。示例代碼如下：
MyPlugin.install = function (Vue,options){
//全局註冊組件
Vue.component('component-name',{
//組件內容
})
//添加實例方法
Vue.prototype.$Notice = function(){
//邏輯
}
//添加全局方法或屬性
Vue.globalMethod = function(){
//邏輯
}
……
}
通過Vue.ues()來使用插件：
Vue.use(MyPlugin)
//或
Vue.use(MyPlugin,{
//參數
11.1 前段路由與vue-router
11.1 前端路由與vue-router
前端路由有兩種，一種是通過錨點(#),JS通過hashChange事件監聽url的改變（IE7或以下需要使用輪詢），另一種是通過H5的History模式，使用"/"分隔沒有#，但是頁面沒有進行跳轉。後一種方式需要服務端支持，服務端接到請求後都指向同一個html文件。SPA只有一個html，整個網站的內容都在這一個html中，通過JS處理頁面的變化。
前端路由的優點有很多，比如頁面持久性，像大部分音樂網站，你都可以在播放歌曲的同時跳轉到別的頁面，而音樂沒有中斷。再比如前後端徹底分離。前端路由的框架通用的有Director，不過更多還是結合具體框架來用
Vue提供了vue-router插件來實現前端路由的功能。
npm install --save vue-router
在main.js中引入插件
import VueRouter from ‘vue-router’;
Vue.use(VueRouter);
然後在main.js中配置路由信息。創建一個數組保存路由列表，每一個路由對應一個組件。
const Routers = [{
path:’/index’,
component: (resolve) => require([’./views/index.vue’],resolve)
},{
path:’/test’,
component:(resolve) => require([’./views/test.vue’],resolve)
}]
以上的寫法是異步實現的懶加載（按需加載），這樣可以不用在打開首頁就加載所有頁面的內容。webpack會把所有路由打包爲一個JS文件。如果想要一次性加載，可以修改component的內容。
{
path:'/index',
component:require('./views/about.vue')
}
配置完路由表後，需要創建路由實例，並設置路由相關的配置。
const RouterConfig = {
//使用html5的history路由模式
mode:'history',
routes:Routers
}；
const router = new VueRouter(RouterConfig);
new Vue({
el:'#app',
router:router,
render:h => {
return h(App)
}
});
在RouterConfig裏，設置mode爲history會開啓html5的history模式，通過”/”設置。如果不配置mode,就會使用“”#”設置路徑。
路由列表的path可以帶參數，比如/user/123456，其中用戶id“”123456“是動態的，但他們路由到同一個頁面，配置如下：
const Routers = [
//...
{
path:'/uesr/:id',
component:(resolve) => require(['./views/user.vue'],resolve)
},
{
path:'',
redirect:'/index'
}
];
//在router/views目錄，新建user.vue文件
<div>{{$route.params.id}}</div>
11.1.3 跳轉
vue-router有兩種跳轉頁面方法，第一種使用內置的組件，它會被渲染爲標籤：
<div>
<h1>首頁</h1>
<router-link to="/about">跳轉about</router-link>
</div>
< router-link＞還有其他的一些prop ， 常用的有：
Tag：tag指定渲染成什麼標籤，比如渲染的結果就是
Replace:使用replace不會留下history記錄。導航後不能用後退鍵返回上一個頁面。
Active-link:路由匹配成功時會自動給當前元素設置一個名爲router-link-active的class,設置prop：active-class可以修改默認的名稱。
export default{
methods:{
handleRouter(){
this.$router.push('/user/123');
}
}
}
$router還有其他方法，比如replace、go.
Vue-router提供了導航鉤子beforeEach和afterEach,它們會在路由即將發生改變前和改變後出發，所有當單頁面應用切換標題時可以設置再beforeEach鉤子完成。
const router = new VueRouter(RouterConfig);
router.beforeEach((to,from,next) => {
window.document.title = to.meta.title;
next();
});
導航鉤子有3個參數：
To:目標導航對象；
From:即將離開的路由對象；
Next:調用該方法後，才能進入下一個鉤子。
當有需求是，一個頁面較長滾動到某個位置，在跳轉到另一個頁面，滾動條默認上一次停留的位置，而好的體驗是返回頂部，通過鉤子afterEach實現。
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
11.2 狀態管理與Vuex
Vuex用於解決跨組件共享數據的需求，用來同意管理組件狀態，它定義了一系列規範來使用和操作數據，使組件應用更加高效。當然，如果項目不是很複雜，需要認真考慮是否有必要使用vuex。
11.2.2 Vuex基本用法
通過npm安裝vuex：
npm install –save vuex
new Vue({
el:'#app',
router:router,
//使用vuex
store:store,
render:h=>{
return h(App)
}