草庐IT

vue - Vue路由(扩展)

Heymar-10 2023-03-28 原文

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

十.缓存路由组件

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

在我们的前面案例有一个问题,都知道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路由(扩展)的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  2. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  3. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息,尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中,我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中,就像这样defregister@title="Registration"@user=Use

  4. ruby-on-rails - Rails 3,嵌套资源,没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容,包括相关问题和stackoverflow上的答案,但仍然无法正常工作。我正在使用嵌套资源,但无法使表单正常工作。我总是遇到错误,例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  5. c - mkmf 在编译 C 扩展时忽略子文件夹中的文件 - 2

    我想这样组织C源代码:+/||___+ext||||___+native_extension||||___+lib||||||___(Sourcefilesarekeptinhere-maycontainsub-folders)||||___native_extension.c||___native_extension.h||___extconf.rb||___+lib||||___(Rubysourcecode)||___Rakefile我无法使此设置与mkmf一起正常工作。native_extension/lib中的文件(包含在native_extension.c中)将被完全忽略。

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  7. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词?例如,给定这样的路线:将“users”匹配到:“users#show”,通过:[:get,:post]我能实现这样的目标吗?users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作,但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文,我有一个设置cookie然后执行redirect_to:ba

  8. ruby-on-rails - 如何在 Rails 中设置路由的默认格式? - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式,每行不带“默认值”散列?谢谢。

  9. ruby-on-rails - 向 Rails 3 添加 Ruby 扩展方法的最佳实践? - 2

    我有一个要在我的Rails3项目中使用的数组扩展方法。它应该住在哪里?我有一个应用程序/类,我最初把它放在(array_extensions.rb)中,在我的config/application.rb中我加载路径:config.autoload_paths+=%W(#{Rails.root}/应用程序/类)。但是,当我转到railsconsole时,未加载扩展。是否有一个预定义的位置可以放置我的Rails3扩展方法?或者,一种预先定义的方式来添加它们?我知道Rails有自己的数组扩展方法。我应该将我的添加到active_support/core_ext/array/conversion

  10. ruby - 如何在 ruby​​ 中复制目录结构,不包括某些文件扩展名 - 2

    我想编写一个ruby​​脚本来递归复制目录结构,但排除某些文件类型。因此,给定以下目录结构:folder1folder2file1.txtfile2.txtfile3.csfile4.htmlfolder2folder3file4.dll我想复制这个结构,但不包含.txt和.cs文件。因此,生成的目录结构应如下所示:folder1folder2file4.htmlfolder2folder3file4.dll 最佳答案 您可以使用查找模块。这是一个代码片段:require"find"ignored_extensions=[".cs"

随机推荐