vue-router导航守卫

同一个路由,渲染两个router-view


全局的导航守卫(导航钩子):

用于判断有无登陆


里面可配置路由的props

路由局部钩子


组件内钩子

beforeRouteUpdate应用场景:同一个组件在不用的路由下面,都是用这个组件去显示

例如:访问/app/123 和/app/456 会触发

因为如果不用这个钩子,就需要用watch来监听/app/:id 中的id的变化


一般用于数据的获取,再把它塞到对象当中 

后面是    vm.id

控制页面离开的行为

如果是确定则离开,取消则不跳转


如果用mounted进行数据初始化的获取,在相似路径下显示同一个组件时,第二次的路由的mounted不会触发


路由懒加载


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 导航守卫 正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫,有多种机会植入路由导航过程...
    前端_周瑾阅读 1,276评论 0 4
  • 完整的导航解析流程 导航被触发。 在失活的组件里调用离开守卫。beforeRouteLeave (to, from...
    R_X阅读 1,373评论 0 1
  • vue-router的守卫可以分为三类守卫, 全局设置,路由设置,组件内部设置 全局设置 在全局的地方进行书写的,...
    海娩阅读 1,325评论 0 1
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,771评论 1 52
  • 金融作为社会重要的组成部分,一直都在被技术改变着,当下在互联网时代也是如此。 从2013年余额宝的诞生,到2014...
    财女养成记阅读 848评论 0 3