【Vue2.0】—vue-router(二十七)

发布时间:2022-06-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【Vue2.0】—vue-router(二十七)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

【Vue2.0】—vue-router(二十七)

一、路由配置

作用:让路由组件更方便的收到参数

【Vue2.0】—vue-router(二十七)

二、<router-link></ router-link> 的replace属性

  • 作用:控制路由跳转时操作浏览器操作历史记录的模式
  • 浏览器的历史记录有两种写入方式:分别是pushreplacepush是追加历史记录,replace是替换当前的记录,路由跳转的时候默认是push
  • 如何开启replace模式
   <router-link replace………………></router-link>

【Vue2.0】—vue-router(二十七)

三、编程式路由导航

作用:不借助实现路由跳转,让路由跳转更加灵活

【Vue2.0】—vue-router(二十七)

四、缓存路由组件

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

代码如下:

【Vue2.0】—vue-router(二十七)

【Vue2.0】—vue-router(二十七)

五、两个新的生命周期的钩子

作用:路由组件所独有的两个生命周期的两个钩子,用于捕获路由组件的激活状态

【Vue2.0】—vue-router(二十七)

【Vue2.0】—vue-router(二十七)

六、路由守卫

作用:对路由进行权限的控制 分类:全局守卫、独享首位、组件内守卫

全局守卫

【Vue2.0】—vue-router(二十七)

独享路由守卫

【Vue2.0】—vue-router(二十七)

组件内守卫

【Vue2.0】—vue-router(二十七)

七、路由的两种工作模式

  1. 对于一个url来说,什么是hash值?

    #及其后面的内容就是hash值

  2. hash值不会包含在HTTP请求中,即:hash值不会带给服务器

hash模式

  • 地址中永远带着#号,不美观
  • 若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合法
  • 兼容性较好

history模式

  • 地址干净,美观
  • 兼容性和hash模式相比略差
  • 应用部署上线时需要后端人员支持,解决页面服务器端刷新404的问题

脚本宝典总结

以上是脚本宝典为你收集整理的【Vue2.0】—vue-router(二十七)全部内容,希望文章能够帮你解决【Vue2.0】—vue-router(二十七)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: