vue - Vue路由(扩展)
忙里偷闲,还在学校,趁机把后面的路由多出来的知识点学完
十.缓存路由组件
让不展示的路由组件保持挂载,不被销毁
在我们的前面案例有一个问题,都知道vue的路由当我们切换一个路由后,另一个路由就会被销毁,如果我在一个路由写了有一些input框
当我切换到另一个组件message很明显这个时候news里面的内容就会丢失,毕竟都被销毁了,以前说过的专门用来保存旧dom的$el这些都会被销毁,而再挂载的时候没有可以复用的就会直接生成新的DOM,所以当我们切换回来就是一个全新的input框
那么有没有办法能够解决这个问题,毕竟类似于这样的情况,大多数都是能够记住input里面的内容切换回来也还是这样
用到一个全新的标签将我们的 input所在的组件的router-view标签加入到里面去
注意这里面可以写一个属性include,不写的话就默认所有这里展现的路由组件都会缓存,但是没得这个必要,其他组件没有input,也不需要缓存的话,可以加include属性值为 那个组件的name既可以专门缓存这一个组件的内容
缓存多个路由组件,将include动态绑定,然后写一个数组的形式
十一.两个新的生命周期钩子
像我们上面的案例接着来,如果我添加了一个news组件里面的内容,让他的opacity动态变化
这个时候你会发现,就算你切走了,还是在输出,因为根本没有销毁,一直挂载起的,这个时候这样一直挂载起又有点没有必要了,因为我都看不到那边的情况,就算你帮我缓存数据,我也看不到,更没必要一直给我开启定时器
两个全新的而且只有路由能用的钩子:一个是 activated 当前这个路由组件被激活时被调用的生命周期钩子,一个是deactivated是路由组件失活时被调用,所以这个时候调用这两个钩子比mounted和brforeDestroy要好得多
十二.路由守卫
1.全局前置路由守卫
添加一个需求,前面的案例当我切换home和about正常切换,但是切换home里面的message和news的时候需要权限,也就是好像一个守卫一样守着这个关卡认证不对不会给你放行。
比如我在localStorage放入一个user,只有当user为admin的时候才可以点击news和message
全局体现在哪,体现在我是对整个router进行的设置。
这个守卫需要放在router,所以在配置文件里面不能直接导出,前置体现在哪?一个路由的方法 .beforeEach,意思是在每一次切换之前,她在两种情况下调用,一个是每一次切换之前,一个是初始化的时候,注意是切换之前,也就是刚好点击切换但是还没切换过去这一个节点,他会接受三个参数,to是你点击要去的路由组件,from是你来自于哪个组件,还有一个next也是必须要写的,所有的点击切换路由组件,都会被这个守卫拦截到,如果不写next的话,就不会给你放行所以就实现不了切换
既然拿到了这些参数,那就可以做一些判断了,只有当我们想要访问news或者message才会去继续判断你的user是否是admin,如果都满足才会执行next,如果不是切换的这两个组件,该放行的就放行
但是这样写也不好,就像那个path地址,虽然也可以写 to.name,但是如果要十多个路由组件都需要鉴权呢?在我们每一个$route里面有一个属性 meta它是一个对象,叫做路由元信息,他就是专门用来存放一些我们自定义的数据的,我们可以把需要鉴权的路由组件都添加一个这个配置项,统一为isAuth值为true,我们守卫判断的时候判断这个是否为true就可以了
2.全局后置路由守卫
它的触发事件首先也是初始化的时候,还有一个就是切换完后进行触发。
因为都已经切换完了,也没什么事情可以做了,所以这个守卫一般用的也比较少,有一种情况需要用到这个守卫,就是当我们单击了一个路由组件后,我们的网页标题会出现一些与之相关的title,需要在每一个路由组件的meta路由元信息添加各自的标题
如果用前置来做也可以做,点击谁显示谁的title,如果有就显示,但是根目录没有用异或语法显示后一个
但是这样还是有一个bug,就是初试化才进来的时候还是有一瞬间显示的是你index定义的title,所以为了彻底应该在index把title改了
但是用前置做就很麻烦,为了不出现bug还要写两次,而路由就很简单了,直接 afterEach,并且它的参数 只有两个to,from,因为都已经切换完了也不需要继续放心做什么了,他就只需要在里面写上我们换标题的语句,因为所有的验证都已经在前置路由守卫做完了,到后置了说明已经过鉴权了,直接换就可以了
3.独享路由守卫
顾名思义就是一个路由组件独享的路由守卫,怎么来触发,除了初始化之后,就是当我切换进设置的这个路由组件之前,配置在这个路由配置项里面 beforeEnter ,他也跟前置守卫一样有三个参数
可以跟全局后置配合换title,但是要注意独享路由守卫没有 后置
4.组件内路由守卫
顾名思义写在组件里面的路由守卫,就不写在router配置文件里面了。
分别是 beforeRouteEnter通过触发规则进入该组件被触发 beforeRouteLeave通过路由规则离开这个路由守卫时触发,为什么一定是通过路由规则,只有当router匹配的完成的切换才会被触发,如果是当一般组件直接导入使用组件标签的这种组件不会被触发,当你想单独对这个路由组件来点业务逻辑可以在这里,跟独享路由守卫一样的,但是区别于前值和后置,而且改名还是要配合全局后置才能完成
十三.history与hash模式
- 区别一: 也就是我们浏览器上的的路径,hash是带#的,history不带#要好看一点
怎么来切换呢,直接修改router配置文件,一个配置项 mode:为你想要的模式
区别二:history比hash兼容性略差
区别三:项目上线问题
假如我现在用的history模式想要项目上线了,首先要执行run serve build将项目打包,打包好的文件需要服务器环境才能上线展示创建一个独立的环境,node初始化,然后导入express,通过express内置中间件static,将我们的项目静态资源挂载上去
部署上线后会发现,确实路径挺好看,正常点也没问题
但是当你刷新后,就会报错
为什么会找不到这个请求,一般出现这个问题,都是找不到服务器里面这个路径的资源或者一些语法错误,这里的问题就是如果用的history模式,当你刷新的时候就会触发网络请求,去服务器请求这个路径的资源,但是服务器根本没有这个路径,所以就会报错,归根结底还是因为用的history模式错把后面的路径当成了请求地址
同样的操作,我用hash打包来测试,刷新就不会这样,因为#后面的不会通过http带给服务器,就算你刷新发起的网络请求还是根路径,也就是你静态托管出来的资源地址
当然想要用history模式并且能分别出谁是路由匹配的路径,谁才是真正的服务器路径也可以,只是针对于node服务器,可以下载第三方包:connect-history-api-fallback
然后导入并且一定要在静态托管之前注册即可
vue - Vue路由(扩展)的更多相关文章
- 关于Vue的路由、脚手架笔记
在页面引入vue-router.js文件,开始配置路由 <div id="box"> <ul><li> <a v-link="{ ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- Vue控制路由滚动行为
跳转路由时,要求跳转到指定路由的某个地方,可以使用scrollBehavior方法控制. 用法: scrollBehavior(to,from,savedPosition){ } scrollBe ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 使用vue.js路由踩到的一个坑Unknown custom element
在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
随机推荐
- idea常见设置一
1.顶部执行栏调整 原: 设置:勾选view==>toolbar 后: 这个一看其实没有什么太大的作用,但是你看这个按钮 这个按钮就是File==>Settings,这样会稍微方便点,只要 ...
- Python - list、tuple类型
- .c文件和.h文件的关系
参考:12 另一篇:c源文件中为什么要包含自己对应的头文件 问题 在进行C语言文件移植时,遇到 "通常是每个.c文件对应一个.h文件",之前了解过.h文件是头文件,用来引用其他文件 ...
- 决策树算法一:hunt算法,信息增益(ID3)
决策树入门 决策树是分类算法中最重要的算法,重点 决策树算法在电信营业中怎么工作? 这个工人也是流失的,在外网转移比处虽然没有特征来判断,但是在此节点处流失率有三个分支概率更大 为什么叫决策树? 因为 ...
- for 循环详解
学习目标: 掌握 for 循环的使用 学习内容: 1.for语法 for(初始化语句; boolean表达式; 循环后操作语句) { 循环体; } 流程图如下: 特点: 初始化语句:只在循环开始时执行 ...
- 使用babel编译器将es6代码转为es5的方法
1.首先需要安装工具 babel-cli ========= npm i babel-cli -g install 可以使用i 代替 2.安装插件 npm i --save-dev babe ...
- 中小学数学卷子自动生成程序--对G同学的代码分析
前几天,在课程要求下完成了个人项目的项目工程编写,即一个中小学数学卷子自动生成程序. 程序主要功能是用户预设账户登录后可以选择等级进行对应的小中高的数学卷子对应出题生成txt文本. 本文针对partn ...
- Redis快速入门到精通
Redis Redis是一个开源的使用ANSI C语言编写.支持网络. 可基于内存亦可持久化的日志型.Key-Value型 NoSQL数据库,并提供多种语言的API.从2010年3 月15日起,Red ...
- MySQL高级以及锁机制
MySQL高级 推荐阅读: 锁:https://www.cnblogs.com/zwtblog/tag/锁/ 数据库:https://www.cnblogs.com/zwtblog/tag/数据库/ ...
- 不借助 Javascript,利用 SVG 快速构建马赛克效果
之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化. 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法. ...