导航守卫：当用户没有登录时，限制用户不能访问某些页面组件过渡，当页面中切换会出现动态的切换效果组件中的参数传输：在首页选择某些信息，跳转到子页能做出渲染懒加载：体验的改进，打开首页是不用加载全部组件，有些组件设置懒加载就可以到用的时候在加载在实际项目中很多地方需要router的运用，下面从实践运用的例子总结一下需要引用router的地方
导航守卫解析
这里实现访问权限限制还需要访问vuex的store，获取当前用户的权限，判断是否允许跳转
在router中的index.js设置全局导航守卫（也就是跳转拦截）
{path:'/CarsList',name:'CarsList',component:CarsList,meta: { requiresAuth: true } //首先在要被限制的路由设置路由元信息，可以通过匹配requiresAuth（可修改）字段验证该路由是否拦截，现在设置了carList为未登录拦截组件（未登录不可访问）},//书写全局拦截守卫，router是声明的路由组件router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {//第一个检测跳转的页面是否设置了未登录不可查看权限// $store.state.checkloginif (store.state.checklogin) { //如果跳转的是要登录权限的页面，这里就是通过访问store检测用户是否登录//大坑，这里是通过访问vue中的store.js 的登录状态来检测权限，在这里访问store不能使用全局变量$store.state,因为这时候页面还没加载，所以要在路由头部import 引用store.js文件！！！！！！！console.log('你还没登录呀！');next({name: 'GoodsSelect',// query: { redirect: to.fullPath},//这里是实现路径重定义，方便完成登录动作直接跳转到本页面params:{err:1} //放回是传递信息给主页面，方便交互（告诉用户不能访问该地方）})} else {next()}} else {next() // 确保一定要调用 next()}});
在权限不够是跳转到默认页面接收params并作出相应动作
mounted(){//每次进入该页面挂载时即验证this.$route.params.err传来信息if( this.$route.params.err){this.$message({type: 'warning',message: '您还没登录呀，请登录！'});}},
组件过渡解析
组件过渡对交互视觉有很好的体验性，有两个官方教程1、官方教程2特别要注意组件内部使用过渡与组件路由过渡切换
路由切换效果：
<transition name="el-fade-in-linear"><router-view class="app-router-view"></router-view></transition>//只需要在transiton加入相应的css属性就可以控制切换效果，router官网还提供每一个组件路由进出的切换效果，这里的效果每个组件都相同，"el-fade-in-linear"是element淡入淡出的继承样式，可以直接用//如果要想在整个页面进出有动态效果直接在scss属性样式设置
组件内元素切换有动态效果：
<transition-group name="list-complete" tag="el-col" appear><el-col :span="span" v-for="(item,index) in data" :key="index" v-show="item.carshow&&item.carprice" class="list-complete-item"><div class="item "><el-card :body-style="{ padding: '0px'}"><img :src="item.car_photo_url" class="item-img" /></el-card>...</div></div></el-col></transition-group>//同样是用name标志样式来控制（注意如果不是单个的组件，一定要用transition-group）
组件间参数传输（网站必须）
如果上一个页面交互中数据与下一个页面有交互（
eg:租车网页首页选择了时间、地点，按确定跳转到汽车展示路由，并请求后台汽车数据，就是大概这么一个过程
）
A页面携带参数跳转到B页面 逻辑思路：
A触发绑定事件编程式：router.push(…)，触发该事件将跳转到目标路由，并打包参数传到该路由组件，B组件每次挂载mounted时会检测是否有路由传输参数$route.params，有就加载参数执行后台请求动作，渲染页面，完成参数传输的全过程。
A页面代码
//触发该事件将，编程式路由会跳转和携带参数postCarlist(site,stime){ //前面的两个if语句是检车输入数据是否合法，我自己项目的检测if(site.length == 0||stime.length == 0){ //验证输入数据是否为空this.$message({type: 'warning',message: '请输入完整时间、地点'});}else{var today=new Date();if(stime[0]<today){ //验证输入的时间是否正确（只能预定）this.$message({type: 'warning',message: '请输入至少2个小时后的时间段'});}else{// 重点是在这里，name后面跟的是要跳转路由的名字，（用name做标记而不用path的原因是path不能用params传输数据，params后面带的就是要传输的数据si）this.$router.push({ name: 'CarsList',params: { selectsite:this.si}});}}},
B页面要接受数据并作出的相关动作
mounted(){//每次挂载的时候都检查数据let site=this.$route.params.selectsite; //这里是接受刚刚传递过来的数据if(site.value.length>0){ //如果数据存在，即将参数传递给方法进行请求渲染this.postCarlist(site.site,site.value)}},
懒加载解析
懒加载，顾名思义是很懒，不去加载组件，为什么要懒加载呢？这就要回到vue单页面的思想上了，vue网站前端项目一个最大的特点是，路由加载页面，也就是说，在页面跳转时不需要请求后台，只需要post数据就可以了，所以全部子页面就默认要一次性下载好，这就导致了打开首页是非常慢，懒加载就是解决这个问题，可以设置一些不常用的子页面为懒加载，当需要引用这个组件的时候再加载这个页面，这个加载的过程并没有刷新这个页面，只是需要加载等待。所以要合理分配加载的页面，才能降低首页载入时间同时不影响子页面的加载体验。设置懒加载很简单，只需要在router的index.js声明一个自己就可以了const CarsList = () => import('@/views/CarsList') //当路由引用组件Carslist时才加载Carlist,路由其他地方不需要改变，也不需要引入该组件
最后放一下最近租车网站设计的进度图（都是运用了上面的技术栈）
导航守卫的例子
ps:这时的拦截页面就很适合用懒加载啦
组件参数传输例子
