vue – Vue路由(扩展)

忙里偷闲,还在学校,趁机把后面的路由多出来的知识点学完

十.缓存路由组件

让不展示的路由组件保持挂载,不被销毁

在我们的前面案例有一个问题,都知道vue的路由当我们切换一个路由后,另一个路由就会被销毁,如果我在一个路由写了有一些input框

vue - Vue路由(扩展)

当我切换到另一个组件message很明显这个时候news里面的内容就会丢失,毕竟都被销毁了,以前说过的专门用来保存旧dom的$el这些都会被销毁,而再挂载的时候没有可以复用的就会直接生成新的DOM,所以当我们切换回来就是一个全新的input框

那么有没有办法能够解决这个问题,毕竟类似于这样的情况,大多数都是能够记住input里面的内容切换回来也还是这样

用到一个全新的标签将我们的 input所在的组件的router-view标签加入到里面去

vue - Vue路由(扩展)

注意这里面可以写一个属性include,不写的话就默认所有这里展现的路由组件都会缓存,但是没得这个必要,其他组件没有input,也不需要缓存的话,可以加include属性值为 那个组件的name既可以专门缓存这一个组件的内容

vue - Vue路由(扩展)

vue - Vue路由(扩展)

缓存多个路由组件,将include动态绑定,然后写一个数组的形式

vue - Vue路由(扩展)

十一.两个新的生命周期钩子

像我们上面的案例接着来,如果我添加了一个news组件里面的内容,让他的opacity动态变化

vue - Vue路由(扩展)

这个时候你会发现,就算你切走了,还是在输出,因为根本没有销毁,一直挂载起的,这个时候这样一直挂载起又有点没有必要了,因为我都看不到那边的情况,就算你帮我缓存数据,我也看不到,更没必要一直给我开启定时器

两个全新的而且只有路由能用的钩子:一个是 activated 当前这个路由组件被激活时被调用的生命周期钩子,一个是deactivated是路由组件失活时被调用,所以这个时候调用这两个钩子比mounted和brforeDestroy要好得多

vue - Vue路由(扩展)

十二.路由守卫

1.全局前置路由守卫

添加一个需求,前面的案例当我切换home和about正常切换,但是切换home里面的message和news的时候需要权限,也就是好像一个守卫一样守着这个关卡认证不对不会给你放行。

比如我在localStorage放入一个user,只有当user为admin的时候才可以点击news和message

vue - Vue路由(扩展)

全局体现在哪,体现在我是对整个router进行的设置。

这个守卫需要放在router,所以在配置文件里面不能直接导出,前置体现在哪?一个路由的方法 .beforeEach,意思是在每一次切换之前,她在两种情况下调用,一个是每一次切换之前,一个是初始化的时候,注意是切换之前,也就是刚好点击切换但是还没切换过去这一个节点,他会接受三个参数,to是你点击要去的路由组件,from是你来自于哪个组件,还有一个next也是必须要写的,所有的点击切换路由组件,都会被这个守卫拦截到,如果不写next的话,就不会给你放行所以就实现不了切换

vue - Vue路由(扩展)

既然拿到了这些参数,那就可以做一些判断了,只有当我们想要访问news或者message才会去继续判断你的user是否是admin,如果都满足才会执行next,如果不是切换的这两个组件,该放行的就放行

vue - Vue路由(扩展)

但是这样写也不好,就像那个path地址,虽然也可以写 to.name,但是如果要十多个路由组件都需要鉴权呢?在我们每一个$route里面有一个属性 meta它是一个对象,叫做路由元信息,他就是专门用来存放一些我们自定义的数据的,我们可以把需要鉴权的路由组件都添加一个这个配置项,统一为isAuth值为true,我们守卫判断的时候判断这个是否为true就可以了

vue - Vue路由(扩展)

vue - Vue路由(扩展)

2.全局后置路由守卫

它的触发事件首先也是初始化的时候,还有一个就是切换完后进行触发。

因为都已经切换完了,也没什么事情可以做了,所以这个守卫一般用的也比较少,有一种情况需要用到这个守卫,就是当我们单击了一个路由组件后,我们的网页标题会出现一些与之相关的title,需要在每一个路由组件的meta路由元信息添加各自的标题

vue - Vue路由(扩展)

如果用前置来做也可以做,点击谁显示谁的title,如果有就显示,但是根目录没有用异或语法显示后一个

vue - Vue路由(扩展)

但是这样还是有一个bug,就是初试化才进来的时候还是有一瞬间显示的是你index定义的title,所以为了彻底应该在index把title改了

vue - Vue路由(扩展)

但是用前置做就很麻烦,为了不出现bug还要写两次,而路由就很简单了,直接 afterEach,并且它的参数 只有两个to,from,因为都已经切换完了也不需要继续放心做什么了,他就只需要在里面写上我们换标题的语句,因为所有的验证都已经在前置路由守卫做完了,到后置了说明已经过鉴权了,直接换就可以了

vue - Vue路由(扩展)

3.独享路由守卫

顾名思义就是一个路由组件独享的路由守卫,怎么来触发,除了初始化之后,就是当我切换进设置的这个路由组件之前,配置在这个路由配置项里面 beforeEnter ,他也跟前置守卫一样有三个参数

vue - Vue路由(扩展)

可以跟全局后置配合换title,但是要注意独享路由守卫没有 后置

4.组件内路由守卫

顾名思义写在组件里面的路由守卫,就不写在router配置文件里面了。

分别是 beforeRouteEnter通过触发规则进入该组件被触发 beforeRouteLeave通过路由规则离开这个路由守卫时触发,为什么一定是通过路由规则,只有当router匹配的完成的切换才会被触发,如果是当一般组件直接导入使用组件标签的这种组件不会被触发,当你想单独对这个路由组件来点业务逻辑可以在这里,跟独享路由守卫一样的,但是区别于前值和后置,而且改名还是要配合全局后置才能完成

vue - Vue路由(扩展)

十三.history与hash模式

  • 区别一: 也就是我们浏览器上的的路径,hash是带#的,history不带#要好看一点

vue - Vue路由(扩展)

vue - Vue路由(扩展)

怎么来切换呢,直接修改router配置文件,一个配置项 mode:为你想要的模式

vue - Vue路由(扩展)

  • 区别二:history比hash兼容性略差

  • 区别三:项目上线问题

    假如我现在用的history模式想要项目上线了,首先要执行run serve build将项目打包,打包好的文件需要服务器环境才能上线展示创建一个独立的环境,node初始化,然后导入express,通过express内置中间件static,将我们的项目静态资源挂载上去

    部署上线后会发现,确实路径挺好看,正常点也没问题

    vue - Vue路由(扩展)

    但是当你刷新后,就会报错

    vue - Vue路由(扩展)

    为什么会找不到这个请求,一般出现这个问题,都是找不到服务器里面这个路径的资源或者一些语法错误,这里的问题就是如果用的history模式,当你刷新的时候就会触发网络请求,去服务器请求这个路径的资源,但是服务器根本没有这个路径,所以就会报错,归根结底还是因为用的history模式错把后面的路径当成了请求地址

    同样的操作,我用hash打包来测试,刷新就不会这样,因为#后面的不会通过http带给服务器,就算你刷新发起的网络请求还是根路径,也就是你静态托管出来的资源地址

    vue - Vue路由(扩展)

当然想要用history模式并且能分别出谁是路由匹配的路径,谁才是真正的服务器路径也可以,只是针对于node服务器,可以下载第三方包:connect-history-api-fallback

然后导入并且一定要在静态托管之前注册即可

vue - Vue路由(扩展)

发表评论

相关文章

当前内容话题