>[success] # 简单弄懂VueRouter 过程 * 声明本章节内容参考拉勾教育大前端课程整理，非原创 ~~~ 1.'Vue Router' 整体使用过程简单的可以分为三步，'将Vue Router 注册在Vue'，'创建Vue Router 实例' '在Vue实例传入router对象' // 注册插件 Vue.use(VueRouter) // 创建路由对象 const router = new VueRouter({ routes: [ { name: 'home', path: '/', component: homeComponent} ] }) // main.js // 创建 Vue 实例，注册router 对象 new Vue({ router, render: h => h(App) }).$mount('#app') ~~~ >[info] ## 在这之前需要了解的 ~~~ 1.'Vue 构建版本区别','Vue 实例中$opitions'，'Vue.mixin', 'Vue.observable','history.pushState', 'popstate' ~~~ >[danger] ##### Vue 构建版本区别 ~~~ 1.运行时版：不支持 template 模板，需要打包的时候提前编译（render函数） 2.完整版：包含运行时和编译器，体机比运行时版大 10K 左右，程序运行的时候把模板转换成 render 函数 3.vue-cli 创建的项目默认使用的是 运行时版本的 Vue，现在有一个疑问如果用vuecli搭建的项目 是运行时版本，即只能解析render函数版本，那么平常使用vue-cli开发项目的时候又是为何可以用 template 模板形式开发呢？ 答:在编译阶段利用webpack，loader 插件在编译的过程时候就将这些'.vue'结尾文件给编译成render 使用vuecli时候内置这种脚手架，使用了'vue-loader'，会在编译时候进行了转译，将template模板写法 转换成render 4.来看两个版本，'完整版'虽然默认支持template写法，相对的在每一次运行的时候都需要将template转换成 render 这个过程是在使用阶段，这样的耗时是对用户体验上的影响，'运行时版本'虽然不支持template形式 但在开发打包阶段完全可以使用一些loader 帮助转译，这样整体的代码都变成了render 在用户使用的时候 变相提示速度 5.当然如果想在使用vuecli 时候开启template 版本，可以在'vue.config.js' 将'runtimeCompiler: true'开启，默认是 false 不开启 ~~~ >[danger] ##### Vue 实例中$opitions --'$options 存储构造函数的传入参数' ~~~ 1.使用vue 时候，打印vue实例可以看到$opitions 属性,'$options 存储构造函数的传入参数',举个例子(如图一) const vm = new Vue({ router, ccc: 'ccc', render: h => h(App) }).$mount('#app') console.log(vm) 2.注册组件他们this实例如图二，这些'$opitions'中是没有刚开始'存储构造函数的传入参数',但是可以通过'$opitions' 中的parent 字段一级一级往上推找到最开始的根 new Vue这个对象 ~~~ * 如图一Vue根实例  *图二  >[danger] ##### Vue.mixin -- 混入 ~~~ 1.关于混入可以参考当前目录的'Vue -- 组件升级篇','Vue -- 组件通信（二）','Vue -- 组件通信（三）' 2.这里简单总结，混入分为三种'组件'，'全局'，'自定义'，混入的遵循的规则抛开'自定义合并策略' 如果混入的值和组件值重复并在发生冲突时以组件数据优先，但是同名钩子函数将合并为一个数组， 因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用(这里的钩子理解成声明周期) 3.一旦使用全局混入，它将影响'每一个'之后创建的 Vue 实例 ~~~ [关于混入参考的链接](https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80) [自定义混入参考的链接](http://www.voidcn.com/article/p-hwwhxuur-bvx.html) >[danger] ##### Vue.observable ~~~ 1.这是vue2.6 版本后新增的api，可以将让一个'对象可响应（2.x具有get和set）'。Vue 内部会用它来 处理 data 函数返回的对象。也可以作为最小化的跨组件状态存储器 ~~~ * 举个例子 ~~~ // 使用observable 声明了一个可以让对象变成响应'state1' 和'state2' import Vue from 'vue' const state1 = Vue.observable({ name: 'ww' }) const state2 = Vue.observable({ age: 20 }) export { state1, state2 } // 在某个组件调用 如果其他组件也调用了state1 ，那他取值时候state1.name 变成'www',可以做跨组件传值 <template> <div> 这是 Blog 页面{{this.$route.params.index}} </div> </template> <script> import { state1, state2 } from '../tools/observable' export default { name: 'Blog', mounted() { console.log(state1, state2) state1.name = "wwww" }, updated() { console.log(2) } } </script> ~~~ [参考链接](https://cn.vuejs.org/v2/api/#Vue-observable) >[danger] ##### history.pushState [参看链接](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) ~~~ 1.history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态，这样不会请求后台，用来做 可以用来做前端路由history模式的url ~~~ >[danger] ##### popstate ~~~ 1.在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back() 或者history.forward()方法） ~~~ [popstate](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event)