当前位置:网站首页 > Vue.js开发 > 正文

vuerouter路由守卫(vuerouter路由守卫与生命周期的关系)



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

具体名字:

  1. 路由组件被激活时触发。
  2. 路由组件失活时触发。

如,在一个路由里的某个数据,在切换到另一个路由对应的组件后,里面的数据还保留,也就是不销毁原来的组件,但是需要关闭里面的定时器,所以用组件的beforeDestroy钩子无法实现关闭掉定时器,因为原组件通过标签所包含着的。这时候就可以用钩子来关闭定时器。注意:组件失活不等于组被销毁。

srcpagesNews.vue

 
  

作用:对路由进行权限控制

分类:全局守卫、独享守卫、组件内守卫

 

案例

 
 
 

必须是通过路由进入该组件才会触发守卫,如果是引用该组件直接通过组件标签在页面显示是不会触发守卫的。

 
  1. 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
  3. hash模式:
    1. 地址中永远带着#号,不美观 。
    2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式:
    1. 地址干净,美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题

在路由器里可以指定工作模式:

 



到此这篇vuerouter路由守卫(vuerouter路由守卫与生命周期的关系)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!







版权声明


相关文章:

  • vue插槽传参(vue插槽传参数)2026-02-23 22:09:04
  • vue路由守卫用法(vue路由守卫作用)2026-02-23 22:09:04
  • vue2和vue3区别面试题(vue2与vue3 diff)2026-02-23 22:09:04
  • vue安装(vue安装教程)2026-02-23 22:09:04
  • vue2父子组件传值(vue父子组件传值emit)2026-02-23 22:09:04
  • Vue安装脚手架(vue安装脚手架3.0使用淘宝镜像安装速度过慢)2026-02-23 22:09:04
  • nvme2.0接口(nvme2.0接口速度)2026-02-23 22:09:04
  • vmware密钥是什么(vmware 15.5.6密钥)2026-02-23 22:09:04
  • pcie5.0(pcie5.0电源)2026-02-23 22:09:04
  • map转json字符串 转义符(map转换为json对象)2026-02-23 22:09:04
  • 全屏图片