1、render函数
var app = new Vue({
el: '#app',
router,
render: h => h(App) //新添加的函数操作
})
我们新加了render: h => h(App) 一开始我没看懂，直接注释运行看下，结果<div id="app"></div> 这个容器里面就啥也没有渲染出来。我也不怎么理解，如果有大牛清楚的恳请留言指导一下啊。但是我还是查了一下资料
官方文档说明1：
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
}
官方文档说明2：
render ，类型：Function
详细：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。（我是这么理解的，我们的路由跳转时，定位到了一个组件进行渲染，但是之前app这个容器里面是有其他组件的，我们不能直接添加进去，只能把app里面的模板文件替换掉，所以用这个字符串模板的代替方案render（不知道对不对，真心请大神指出，大家这里略过吧））
2、懒加载
懒加载的必要性：
（1）解决样式冲突问题
（2）解决页面资源加载问题
（3）路由被访问时才加载对应组件，提高应用加载效率
具体代码写法：关键我们要做的就是把之前普通import进来的组件定义成异步组件。
//前
import home form "./components/home"
import login form "./components/login"
//后
const home = resolve => require(['./home.vue'], resolve)
const login = resolve => require(['./login.vue'], resolve)
3、路由构造配置
const router = new VueRouter({
mode: 'history',//history: 依赖 HTML5 History API 和服务器配置。
base: __dirname,
linkActiveClass:'link-active',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
routes
})
mode ：默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。
当你使用 history 模式时，URL 就像正常的 url，没有 # 号了
base ：默认值: “/”，应用的基路径，一般就是项目的根目录，webpack中有配置好。
var projectRoot = path.resolve(__dirname, '../')
linkActiveClass ：默认值: “router-link-active”，就是当前组件被激活，相应路由会自动添加类”router-link-active”，这里是为了全局设置激活类名，如果不设置，直接用默认的也是可以的。
scrollBehavior ：通过这个这个属性（是个函数），可以让应用像浏览器的原生表现那样，在按下 后退/前进 按钮时，简单地让页面滚动到顶部或原来的位置。
4、router-link的其他表现形式
有时候我们会这样去写，但是发现多了一个层级，而Vue提供了很好的方案。
<li>
<router-link to="/mine">
<i class="icon-nav icon-nav5"></i><span>我的</span>
</router-link>
</li>
<router-link to="/mine" tag="li"> //tag指定标签名
<i class="icon-nav icon-nav5"></i><span>我的</span>
</router-link>
//渲染结果
<li>
<i class="icon-nav icon-nav5"></i>
<span>我的</span>
</li>
5、当前路由添加激活状态
地址栏变化的同时，对应组件也要相应的切换状态，这是因为vue-router提供了这样的机制，即当前路由激活时，自动添加类名，默认router-link-active ，在创建vue-router实例的时候给他设置全局配置，修改默认添加类名。
可以直接用默认类名，那接下来就是写CSS（less）样式了
linkActiveClass:'link-active'
.router-link-active{
.icon-nav5 {
background-image: url('../assets/img/icon-nav5a@3x.png');
}
color: #e5321e;
}
不过这里会遇到一个问题，就是当出现嵌套路由时，会出现激活污染。 举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。 同样的，按照这个规则，<router-link to="/"> 将会被各个路由激活！这时我们需要使用 exact 属性来解决这种情况。
<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact>
6、路由跳转时添加过渡动效
这个功能也是通过vue-router切换时，自动添加了类名实现的。路由之间的切换添加一点动效效果会很不错的。 这里我们在App组件的路由出口上添加动效就好了，因为所有的组件都渲染在这里，这样我们就可以给所有的路由切换添加动效。
<template>
<div id="app">
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
过渡的css类名：
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
要想添加更多的动画效果，大家可以看文档和自由发挥了，也可以添加其他动画库。
7、命名路由
在路由实例创建的时候，我们会给每个路由地址添加一个name属性，这样在路由嵌套的时候，就不用写很长的路由地址，只需要写个name就好了。
routes: [
{
path: '/login/loginWx',
name: 'loginWx',
component: function(reslove){
return require(['./components/login/loginWx'],reslove)
}
}
]
//命名的路由
<router-link :to="{ name: 'loginWx', params: { userId: 123 }}">User</router-link>
8、通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：注意差别
export default {
computed: {
username () {
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}