vue-router 的总结（导航守卫、组件过渡、组件间参数传输、懒加载）
在实际项目中很多地方需要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.checklogin
if (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]//验证输入的时间是否正确（只能预定）
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:这时的拦截页面就很适合用懒加载啦
组件参数传输例子