Vue路由钩子 afterEach beforeEach区别
vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结
使用vue-cli作为开发前提 vue-router已经配置好了
路由写法
routes: [
{
path: '/cart',
name: 'cart',
component: cart,
meta :{ title: "购物车"} //用于给定网页名
}
]
vue-router 的路由跳转的方法
第一种 : 编程式的导航
<router-link to="/" tag="p">耳机频道</router-link>
//to是一个prop.指定需要跳转的路径,也可以使用v-bind动态设置
//tag可以指定渲染成标签,默认是a标签
<router-link to="/" replace>跳转回去</router-link>
//这样的写法是不会留下历史痕迹,回退键无效
<router-link :to="{ name: 'product', params: { id : 1 }}">User</router-link>
// /product/1
第二种 : 函数式的导航
//这里假设 我要跳转product页面并且附带参数id
//这里定义好了list.id 就是 动态的值
this.$router.push('./product/' + list.id) // 字符串的方式进行描述
this.$router.push({name : 'product',params: { id : list.id }}) // 命名的路由的方式进行描述
this.$router.push({ path: `/product/${list.id}` }) // 直接定义path类似第一种
//比较常用的跳转路由的方法
//假如是带查询参数
router.push({ path: 'product', query: { id: list.id }}) // /product?id=1
这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link>
时,这个方法会在内部调用,所以说,点击 <router-link :to="...">
等同于调用 router.push(...)
。
值得注意的一点是,如果提供了 path,params 的配置将不会生效
还有一些方法
router.replace //它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录
router.go(1) //在浏览器记录里面前进一步,等于history.forward()
router.go(-1) //后退一步记录,等同于 history.back()
router.go(n) //浏览器记录前进3步
基本使用大概就这么多
还有 命名视图 路由重定向 等等需要的请看官网
基本知识大概就这么多
现在说说正题 afterEach beforeEach这两个导航守卫的区别
正如其名,vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。
在全局守卫里面
beforeEach 全局前置守卫
当一个导航触发时,全局前置守卫按照创建顺序调用。
每个守卫方法接收三个参数:
- to: Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖
next
方法的调用参数。
router.beforeEach((to, from, next) => {
console.log(to); //即将要进入的路由对象
console.log(from); //当前导航要离开的路由对象
next(); //调用该方法,才能进入下一个钩子
})
//这样写就可以明显的看出每个参数的意义
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next
传递任意位置对象,且允许设置诸如 replace: true
、name: 'home'
之类的选项以及任何用在 router-link
的 to
prop 或 router.push
中的选项。
确保要调用 next 方法,否则钩子就不会被 resolved
afterEach 全局后置钩子
router.afterEach((to, from) => {
// ...
})
然而和守卫不同的是,这些钩子不会接受 next
函数也不会改变导航本身
从使用的角度来说 前置钩子更加常用,比如登录验证 以及给Vue单页面引用规定网页名等等
router.beforeEach((to,from,next) => {
if(to.meta.title) {
document.title = to.meta.title; //在路由里面写入的meta里面的title字段
}
next();
})
组件内的守卫请看官网的例子
Vue路由钩子 afterEach beforeEach区别的更多相关文章
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...
- vue 路由钩子。
一.全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子: const router = new VueRouter({ ... }) router.befor ...
- vue路由守卫触发顺序
不同组件之间的路由跳转流程图 导航被触发(A–>B) 调用A组件内路由守卫beforeRouteLeave(to,from,next) 调用全局路由前置守卫router.beforeEach(t ...
- vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...
- VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...
- vue组件级路由钩子函数介绍,及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...
- vue 生命周期钩子 路由钩子 动画钩子 执行顺序
进入首页的钩子们 1 路由钩子 路由跳转前beforeEach 2 路由钩子 home组件内部:守卫执行前beforeRouteEnter 3.路由钩子 路由跳转后afterEach 4 生命周期 h ...
随机推荐
- 【Udacity】解决:字幕遮挡视频内容怎么办?Udacity字幕大小调整
字幕有没有办法显示在最下方,否则把内容挡住了,根本看不清老师所指的内容 Chrome 的小插件,能方便地调节视频的字幕大小,譬如:Udacity 的学习视频字幕大小不能调节,有时候不想它占太多位置,而 ...
- leetcode-wildcard matching-ZZ
http://yucoding.blogspot.com/2013/02/leetcode-question-123-wildcard-matching.html 几个例子: (1) acbdeabd ...
- MySQL5.7的组提交与并行复制
从MySQL5.5版本以后,开始引入并行复制的机制,是MySQL的一个非常重要的特性. MySQL5.6开始支持以schema为维度的并行复制,即如果binlog row event操作的是不同的sc ...
- CXPACKET等待事件
今天收到数据库预警,发现连接数较多.于是立马登录查看机器的基本情况: select * from sys.sysprocesses 查看了一下连接数,发现有两个进程都处于CXPACKET状态,而且看得 ...
- https填坑之旅
Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...
- Eclipse版本推荐(tomcat运行项目:web、maven)
1.区别 Eclipse根据特性和jdk版本,从Eclipse官网可看到,分为:Neon/Oxygen/Mars/Luna/Kepler/Juno/Indigo/Helios...等等. Eclips ...
- yii2.0数据库查询修改等方法
yii2.0学习有一段时间了,给大家分享一下一些简单的查询等如何操作. 查询:(这里最前面的Test是引用的模型名) Test::find()->all(); 此方法返回所有数据: Tes ...
- ASN.1详解
Chapter 4 ASN.1 4.1 网络数据表示及编码4.2 ASN.1的基本概念4.3 基本编码规则 4.1 网络数据表示及编码ASN.1(Abstract Syntax Notation 1) ...
- [原]零基础学习SDL开发之在Android使用SDL2.0加载字体
在上一篇文章我们知道了如何在android使用SDL2.0来渲染显示一张png图,而且在上上一篇我们知道如何使用sdl来渲染输出bmp图,那么sdl是否可以渲染输出自己喜爱的字体库的字体呢?答案是当然 ...
- angularJS报错$apply already in progress的原因和解决方法
如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中 ...