配置路由模式
const router=new VueRouter({routes
})hash模式(默认):通过url的hash来模拟一个完整的url，于是当url改变时，页面不会重新加载。
history模式：通过history完成url跳转而不需要重新加载页面。
注意：为了防止404错误，要写个notFound.html来防止页面找不到错误
const router=new VueRouter({routes:[{path:'*',component:NotFoundComponent}]
})动态路由匹配
假设当前有路径/data,当你/data/xx,不管xx是什么内容，都需要让他显示某个组件component:A,或者说是路由到某一个页面，就需要使用动态路由配置。
嵌套路由
假如/data下能有两个子路由/data/a和/data/b分别跳转A和B页面，这时就可以使用嵌套路由。
编程式的导航
可以在代码中控制路由，包含了几个跳转函数。
router.push(location) history会有记录
router.replace(location) history不会有记录
router.go(n) 在history记录中向前跳转几页或者向后几页
其中location的值有以下几种类型:
'home'
{path:'home'}
{name:'user',params:{userId:123}} //命名路由，变成/user/123
{path:'register',query:{plan:'private'}} //带查询参数，变成/register?plan=private
重定向和别名
const router=new VueRouter({routes:[{ path:'/a',redirect:'b'}]
}也可以是命名的路由
const router=new VueRouter({
routes:[
{path:'/a',redirect:{name:'foo'}}]
})
路由组件传参
使用props将组件和路由解耦：
取代与$route的耦合
const User={
template:'<div>User {{$route.params.id}}</div>'
}
const router=new VueRouter({routes:[{path:'/user/:id',component:User}]
})//通过props解耦
const User={props:['id'],template:'<div>User{{id}}</div>'
}
const router=new VueRouter({routes:[{path:'/user/id',component:User,props:true},{path:'/user/:id',components:{default:User,sidebar:Sidebar},props:{default:false,sidebar:false}}]
})过渡动效
使用<transition>组件添加一些过渡特效
<transition><router-view></router-view>
</transition>单个路由的过渡
让每个路由组件有各自的过渡效果，解决方法在各路由组件内使用<transition>并设置不同的name。
const Foo={template:'<transition name="slide"><div class="foo">...</div></transition>
'
}
const Bar={template:'<transition name="fade"><div class="bar">...</div></transition>'
} 数据获取
分为两种：
（1）导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据，在数据获取期间显示“加载中”。
（2）导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
导航完成后获取数据
使用这种方式，马上导航和渲染组件，然后在组件的created钩子中获取数据，可以在数据获取期间展示一个loading状态。
<template><div class="post"><div class="loading" v-if="loading">Loading...</div><div v-if="Error" class="error">{{error}}</div><div v-if="post" class="content"><h2>{{post.title}}</h2><p>{{post.body}}</p></div>
</template>export default{data(){return{loading:false,post:null,error:null}},created(){//组件创建完后获取数据，此时的数据已经被检测到了this.fetchData()},watch:{'$route':'fetchData'},methods:{fetchData(){this.error=this.post=nullthis.loading=truegetPost(this.$route.params.id,(err,post)=>{this.loading=falseif(err){this.error=err.loading()}else{this.post=post}})}}}
