>[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根实例 ![](https://img.kancloud.cn/cc/20/cc202c2de7000593fcfaa84e66f5dc19_489x246.png) *图二 ![](https://img.kancloud.cn/ba/0e/ba0eb9d4f19c3ff53246aed06540dbc9_629x331.png) >[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)