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.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:这时的拦截页面就很适合用懒加载啦

组件参数传输例子

vue-router 的总结（导航守卫、组件过渡、组件间参数传输、懒加载）相关推荐

swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
vue中监听div的滑动到底部，并实现懒加载
<div ref="rightDiv">11233</div> mounted(){this.$refs.rightDiv.addEventListener ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
Vue组件代码分块和懒加载
前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作: 代码分块懒加载非必要资源文件非必要资源,指的首次渲染出某页面所不必要的资源, ...
vue图片懒加载插件vue-lazyload
插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-lazyload/ 1.安装 cnpm ...
Vue(小码哥王洪元)笔记06路由，url的hash，history，router-linke，路由跳转，动态路由，懒加载，路由嵌套，router参数传递，导航守卫
1.什么是路由路由器提供了两种机制:路由和传送路由:数据报从来源到目的地的路径传输:将输入端的数据转移到合适的输出端路由有一个非常重要的概念教路由表路由表本质上就是一个映射表,决定了数据包的 ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...