持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是路由相关知识
- 这是基于我学习的笔记而来的文章
为什么使用导航守卫?
- 我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?
- 网页的标题是通过来显示的, 但是SPA只有一个固定的HTML,切换不同的页面时, 标题并不会改变
- 但是我们可以通过JavaScript来修改的内容.window.document.title = '新的标题'.
- 那么在Vue项目中, 在哪里修改?什么时候修改比较合适呢?
- 普通的修改方式:
- 我们比较容易向导的修改标题的位置是每一个路由对应的组件.vue文件中.
- 通过mounted声明周期函数,执行对应的代码进行修改即可
- 但是当页面比较多时, 这种方式不容易维护(应为需要在多个页面执行类似的代码)
- 有没有更好的办法呢?使用导航守卫即可.
- 什么是导航守卫?
- vue-router提供的导航守卫主要用来监听路由的进入和离开的
- vue-router提供了beforeEach和afterEach的钩子函数, 他们会在路由即将改变前和改变后触发
- 我们可以利用beforeEach来完成标题的修改
- 首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
- 其次, 利用导航守卫, 修改我们的标题
- 导航钩子的三个参数解析:
- to: 即将要进入的路由对象
- from: 当前导航即将要离开的路由对象
- next: 调用该方法后, 才能进入下一个钩子
- 导航守卫补充
- 补充一:如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.
- 补充二: 上面我们使用的导航守卫, 被称之为全局守卫
- 路由独享的手诶
- 组件内的守卫
- 更多内容可以在官网上学习
keep-alive遇见vue-router
- keep-alive是Vue内置的一个组件, 可以使被包含的组件保留状态 ,或避免重新渲染
- 他们有两个非常重要的属性
- include - 字符串或正则表达, 只有匹配的组件会被缓存
- exclude - 字符串或正则表达式, 任何匹配的组件都不会被缓存
- router-view也是一个组件, 如果直接被包在keep-alive里面, 所有路径匹配到的视图组件都会被缓存
- 通过create声明周期函数来验证
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于webpack的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
