一、vuecli
初始化项目选择两种runtime：runtime-compiler runtime-only 前者是组件渲染，后者是render函数渲染。
两种的区别其实就是构造出来的项目main.js runtime-compiler 与 runtime-only 的区别,如下
前言
创建vue组件的时候，options中既有template又有el,那么template就会替换el中的内容。
比如index.html原本内容如下，但是被 <template>替换，body中只有组件的内容
想要了解 runtime-compiler 与 runtime-only 的区别，首先需要知道Vue程序的运行过程，和理解 createElement函数。
vue运行过程
runtime-compiler
注册组件APP，通过<template>使用组件进行渲染
过程： 获取options.template参数-（解析）-》抽象语法树ast-(compile编译)->render 函数-（render函数渲染（APP））-》虚拟DOM树-》真实DOM
runtime-only
使用render函数，传入APP组件渲染
过程：render函数渲染（APP）-》虚拟DOM-〉真实DOM
这里可能会有一个疑问: 直接由render函数渲染的 .vue 文件中的 template 是由谁处理的呢？ 是由 vue-template-compiler 编译成了render函数，文件中已经不存在 template了。
理解createElement
至此，这样就明白了 runtime-compiler 逐渐变成 runtime-only 的版本的演练过程 了，经过render函数，加快了编译，减少了vue运行中的代码量
二、vue-router
前言
- 后端路由阶段
以前后端负责页面的展示和逻辑，后端通过html+css+java写jsp页面，前端通过页面的路由请求后端的资源，每一个url都会请求后端不同的资源，每请求一次，由于资源变化了，都需要刷新页面。
- 前后端分离
后来出现了ajax技术，前后端责任分工发生了变化，后端有后端服务器，负责写接口，维护数据库，传递前端页面需要的数据。而前端也有自己的静态资源服务器，将本地写好的资源托管到静态资源服务器，每访问不同的路由，都会下载不同的html+css+js资源，其中htm+css只要下载到就能展示。而js下载后需要执行，执行到ajax发送请求到后端，才会向后端服务器发送请求，获得接口返回后再进行页面的渲染。这样前后端责任分工更加明确，然而对于用户来说，访问不同的url,页面也会刷新，因为下载了不同的前端服务器上的资源。
- 前端路由阶段
前后端责任仍然分工明确，只不过前端所有的页面下载的静态资源是一套，即只有一个html页面，这个html中引用了应用所需的css+js。出现了一种前端路由技术，使得当前端url发生变化的时候，从唯一的html中过滤筛选需要展示哪部分内容，此时页面不会刷新，这也叫SPA应用
路由技术
下边介绍url变化页面不刷新的几个技术：
URL的loaction.hash
以脚手架构建的项目为例，哈希模式路由，启动后默认url如下
通过
location.hash 为#/ ，修改location.hash = 'bar' url变化为localhost:8080/#/bar,在当前的哈希#/ 后追加赋值。此时页面并未刷新
html5的history
第二种修改url但是页面不刷新的技术是html5的的history路由模式。 原理依赖栈结构，后进先出，通过一些进栈和出栈的API实现路由的切换，具体API如下：
history.pushState(data = {}, title = '', url = '')添加一个history路由，data为传递的query参数，title为标题， url为path
持续push后，可通过浏览器的回退按钮，回退到上一个state,底层：回退一次，histotyState出栈一个。浏览器的回退,前进，也有对应的API：
回退 history.back() & history.go(-1)
前进
history.forward() & history.go(1)
Vue-Router
vue框架中的路由解决方案，作为一个vue插件和vue紧密结合。
步骤一：安装vue-router
npm install vue-router --save
步骤二：在模块化的工程中使用它（因为是个插件，需要通过Vue.use(插件)的方式安装路由功能）
- 使用插件：导入node_modules中的路由对象VueRouter，并且使用Vue.use(VueRouter)
- 创建路由实例：创建路由实例，传入映射配置
- vue实例挂载路由实例：在新建的vue实例中挂载路由实例
使用Vue-router
一、使用router-link 和router-view
router-link 类似于A标签，vue-router内置的组件，控制路由变化的，最终被渲染成A 标签
router-view 占位符，显示router-link 改变path后的component内容展示在什么地方
优化一：想让应用已启动，不用点击任何位置，直接展示首页？
配置Router实例，重定向
优化二：改路由模式？
router-link的补充
- tag: 指定router-link渲染为什么组件展示
- replace： 执行router-link指定的路由能否返回
- active-class： 指定活跃状态的router-link 类名，默认是router-link-active,项目中做一些相关需求用到
也可以不在router-link上配置，在Router实例统一配置
二、使用内置方法
有的时候，跳转路由不在HTML元素中进行，而是通过js方式，那么就用到了this.$router.push的方式
动态路由
有的场景，我们希望同一个系统，A登录，路由展示A名字或ID，B登录，路由展示B名字或ID。此时就需要根据登录人来展示不同的路由，这种情况叫做动态路由。涉及到两个方面：
- 路由实例配置
path/：key增加路由的参数
-访问时，路由必须满足条件才能匹配上，从而渲染正确的组件
匹配失败，不渲染
匹配成功
补充 $router和$route
- $router: 当前 Vue实例中挂在的的Vue-Router实例
- $route:根据当前url获取的当前路由对象，有query,parmas等参数
