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 什么是前端路由
webpack的主要使用场景是单页面富应用（SPA），而SPA的核心就是前端路由。那什么是路由呢？通俗地讲，就是网址。再专业一点，就是每次GET或者POST等请求在服务端有一个专门的正则配置列表，然后匹配到具体的一条路径后，分发到不同的Controller，进行各种操作，最终将html或数据返回给前端，这就完成了一次IO。

目前绝大多数的网站都是这种后端路由，也就是多页面的，这样的好处有很多，比如页面可以在服务端渲染好直接返回给服务器，不用等待前端加载任何js和css就可以直接显示网页内容，再比如对SEO的友好等。后端路由的缺点也是很明显的，就是模板是由后端来维护或改写的。前端开发者需要安装整套的后端服务，必要时还得学习像PHP或Java这些非前端语言来改写html结构，所以html和数据、逻辑混为一谈，维护起来既臃肿又麻烦。

然后就有了前后端分离的开发模式，后端只提供API来返回数据，前端通过Ajax获取数据后，再用一定的方式渲染到页面里，这么做的优点就是前后端的事情分得很清楚，后端专注在数据上，前端专注在交互和可视化上，如果今后再开发移动APP，那就正好能使用一套API。当然，缺点也很明显，就是首屏渲染需要时间来加载css和js。这种开发模式被很多公司认同，也出现了很多前端技术栈。在Node.js出现后，这种现象有了改善，就是所谓的大前端，得益于Node.js和JavaScript的语言特性，html模板可以完全由前端来控制，同步或异步渲染完全由前端自由决定，并且由前端维护一套模板，这就是为什么在服务端使用artTemplate、React以及Vue2的原因。什么是SPA呢？其实就是在前后端分离的基础上，加一层前端路由。

前端路由，即由前端来维护一个路由规则。实现有两种，一种是利用url的hash，就是常说的锚点（#），JavaScript通过hashChange事件来监听url的改变，IE7及以下需要使用轮询；另一种就是好HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需要服务端支持，服务端接收到所有的请求后，都指向同一个html文，不然会出现404。因此，SPA只有一个html，整个网站所有的内容都在这一个html里，通过JavaScript来处理。

前端路由的优点有很多，比如页面的持久性，像大部分音乐网站，你都可以在播放歌曲的同时跳转到别的页面，而音乐没有中断。再比如前后端的彻底分离。前端路由的框架通用的有Director，不过更多的还是结合具体框架来用，比如Angular的ngRouter，React的ReactRouter，以及Vue的vue-router。

如果要独立开发一个前端路由，需要考虑到页面的可插拔、页面的生命周期、内存管理等问题。

11.1.2 vue-router基本用法
通过npm安装vue-router:

Npm install –save vue-router

在main.js里使用Vue.ues()加载插件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
 
Vue.use(VueRouter);

每个页面对应一个组件，也就是对应一个.vue文件。在router目录下创建views目录，用于存放所有的页面，然后在views里创建index.vue和about.vue两个文件：

//index.vue
<template>
    <div>首页</div>
</template>
<script>
    export default {
        
    }
</script>
 
//about.vue
<template>
    <div>介绍页</div>
</template>
<script>
    export default {
        
    }
</script>

再回到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“是动态的，但他们路由到同一个页面，在这个页面里，期望获取这个id，然后请求相关数据。配置如下：

//main.js
const Routers = [
//...
	{
		path:'/uesr/:id',
		component:(resolve) => require(['./views/user.vue'],resolve)
	},
	{
		path:'',
		redirect:'/index'
	}
];
//在router/views目录，新建user.vue文件
<template>
	<div>{{$route.params.id}}</div>
</template>
<script>
	export default {
		mounted(){
			console.log(this.$router.params.id);
		}
	}
</script>

这里的this.$route可以访问到当前路由的很多信息，可以打印出来看看都有什么，在开发会经常用到里面的数据。
因为配置的路由是“/use/:id”，所以直接访问127.0.0.1:8080/user会重定向到/index，需要带一个id才能到user.vue，比如127.0.0.1:8080/user/123456

11.1.3 跳转
vue-router有两种跳转页面方法，第一种使用内置的组件，它会被渲染为标签：

//index.vue
<template>
	<div>
		 <h1>首页</h1>
		 <router-link to="/about">跳转about</router-link>
	</div>
</template>

to是一个prop，指定需要跳转的路径，也可以用v-bind动态设置。使用
<router-link>在html5的history模式下会拦截点击，避免浏览器重新加载页面。
<router-link>还有其他prop，常用的有：
· tag ：tag指定渲染成什么标签，比如<router-link to=”/about” tag=”li”>渲染的结果就是<li>而不是<a>。
· replace ：使用replace不会留下History记录，所以导航后不能用后退键返回上一个页面，如<router-link to="/about" replace>
· active-class： 当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个命名为router-link-active的class，设置prop: active-class可以修改默认的名称。在做类似导航栏时，可以使用该功能高亮显示当前页面对应的导航菜单项，但是一般不会修改active-class，直接使用默认值router-link-active就可以。
第二种跳转方法为使用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分割到不同模块。