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)
}