​ 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: truename: '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区别的更多相关文章

  1. vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...

  2. vue 路由钩子。

    一.全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子: const router = new VueRouter({ ... }) router.befor ...

  3. vue路由守卫触发顺序

    不同组件之间的路由跳转流程图 导航被触发(A–>B) 调用A组件内路由守卫beforeRouteLeave(to,from,next) 调用全局路由前置守卫router.beforeEach(t ...

  4. vue 路由里面的 hash 和 history

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

  5. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  6. vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

    1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...

  7. VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

    一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...

  8. vue组件级路由钩子函数介绍,及实际应用

    正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...

  9. vue 生命周期钩子 路由钩子 动画钩子 执行顺序

    进入首页的钩子们 1 路由钩子 路由跳转前beforeEach 2 路由钩子 home组件内部:守卫执行前beforeRouteEnter 3.路由钩子 路由跳转后afterEach 4 生命周期 h ...

随机推荐

  1. python小练习2

    结果 代码 鞋子价格=0 男孩价格=0 爆米花价格=0 计算完毕=0 for 鞋子动态价格 in range(0,20): if (计算完毕==1): break; #print("鞋子动态 ...

  2. 程序员装B指南(转载)

    转自:http://www.oschina.net/question/615783_115390 一.准备工作 "工欲善其事必先利其器." 1.电脑不一定要配置高,但是双屏是必须的 ...

  3. python wsgi PEP333 中文翻译

    PEP 333 中文翻译 首先说明一下,本人不是专门翻译的,英文水平也不敢拿来献丑.只是这是两年前用python的时候为了自己学习方便而翻译的,记录着笔记自己看看而已.最近翻出来看看觉得还是放出来吧. ...

  4. SQL点点滴滴_修改数据库的兼容级别

    语法 ALTER DATABASE database_name SET COMPATIBILITY_LEVEL = { 80 | 90 | 100 } 参数 database_name 要修改的数据库 ...

  5. Studying TCP's Congestion Window using NS

    Studying TCP's Congestion Window using NS How to obtain TCP's CWND value The most important value th ...

  6. 【Leetcode】【Medium】Validate Binary Search Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  7. July 09th 2017 Week 28th Sunday

    He that boasts of his own knowledge proclaims ignorance. 夸耀知识实乃无知. Honestly speaking, I don't agree ...

  8. February 22 2017 Week 8 Wednesday

    There is only one happiness in life, to love and be loved. 生命中只有一种幸福,爱与被爱. If you think you are not ...

  9. 不规矩的xml与JAVA对象互相转换的小技巧-使用Marshaller

    摘要:将XML文档与JAVA对象互转是很常见的需求,如果XML定义很规整这很好实现.然而在现实中“不规矩”的XML可能更常见,Marshaller便无能为力了吗?下面是一个小技巧,调整一下思维便能重用 ...

  10. Spring Framework5.0 学习(2)-- Quick Start

    官网:https://projects.spring.io/spring-framework/ Spring Framework 5.x 要求 JDK 1.8以上 1.0   在(1)的基础上,给bu ...