Vue.js实战读书笔记--插件
第十一章 插件
Vue.js提供了插件机制，可以再全局添加一些功能。注册插件需要一个公开方法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.1 什么是前端路由
单页面富应用（SPA）的核心就是前端路由，路由就是指每次get或者post等请求再服务端有一个专门的正则配置列表，匹配到具体一条路径后，分发到不同的controller，对应各种操作，最终将html或者数据返回到前端。
目前大多数都使用后端路由，也就是多页面，这样可以再服务端渲染好返回给浏览器，不用在前端加载任何js或者css，但是这样的话，模板要由后端维护比较麻烦。于是有了前后端分离，后端提供api，前端使用ajax获取数据后渲染到页面。
前端路由，即由前端维护一个路由规则，实现方法有两种，一种是利用url的hash也就是锚点（#），JavaScript通过hashChange事件监听url的变化；另一种就是html5的history模式，以“/”分割，没有#，但页面并没有跳转，不过这种需要服务端支持，服务端收到请求后都指向同一个html文件。
11.1.2 vue-router基本用法
通过npm安装vue-router:
Npm install –save vue-router
在router目录下创建views目录，用于存放所有页面，然后在views里创建index.vue和about.vue两个文件。在main.js中完成路由配置。
const Routers = [
{
path:'/index',
component:{resolve} => require{['./views/index.vue'],resolve}
},
{
path:'/about',
component:{resolve} => require{['./views/about.vue'],resolve}
},
];
上述写法为懒加载，好处就是不需要打开首页时就把所有页面全部加载，只在访问时才加载，如需一次性全部加载为以下写法：
{
path:'/index',
component:require('./views/about.vue')
},
在main.js中完成配置个路由实例
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文件
11.1.3 跳转
vue-router有两种跳转页面方法，第一种使用内置的
//index.vue
首页
To是一个prop，指定需要跳转的路径，也可以用v-bind动态设置。使用
Tag：tag指定渲染成什么标签，比如
Replace:使用replace不会留下history记录。导航后不能用后退键返回上一个页面。
Active-link:路由匹配成功时会自动给当前元素设置一个名为router-link-active的class,设置prop：active-class可以修改默认的名称。
第二种跳转方法为使用router实例的方法。
export default{
methods:{
handleRouter(){
this.$router.push('/user/123');
}
}
}
$router还有其他方法，比如replace、go.
Vue-router提供了导航钩子beforeEach和afterEach,它们会在路由即将发生改变前和改变后出发，所有当单页面应用切换标题时可以设置再beforeEac钩子完成。
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
11.2.1 状态管理与使用场景
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)
}
});
仓库store包含了应用数据和操作过程。Vuex的数据都是响应式的，任何组件使用同一store的数据时，只要store数据变化，对应的组件也会立即更新。
11.2.3高级用法
Vuex还有其他3个选项可以使用：getters、actions、modules。
Getters使用场景为当有多个组件有相同运算或者取值方法时使用。
Actions用于异步操作业务逻辑。其中，mutations与actions比较相似，但涉及到改编数据的，使用mutations，存在业务逻辑的，就用actions。
Modules用来将store分割到不同模块。