六,导航钩子
导航钩子函数主要是在导航跳转的时候做一些操作,比如跳转页面之前,进行判断 进而选择跳转到哪里 钩子函数根据生效范围根据其生效范围可以分为全局钩子函数,路由独享钩子函数 和 组件钩子函数、 全局钩子函数
在路由文件里 对全局进行拦截数据
router.beforeEach((to, from, next)=>{
next();
});
router.afterEach((to, from, next) => {
console.log(to.path);
});

上面方法接受三个参数

to: 下个路由

from: 正离开的路由

next: 一定要调用该方法来resolve钩子

next() 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed(确定的)。

  next(false). 中断当前的导航。

next('/')next({path: '/'}), 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

路由钩子函数:

将上述方法写在路由里

{
path: '/helloworld',
name: 'HelloWorld',
component: resolve => require(['@/views/HelloWorld'], resolve), // 使用懒加载
beforeEnter(to, from, next) {
console.log(111)
console.log(to.path); // 打印 /helloworld
console.log(from.path); // 打印 /
next(); // 跳到/helloworld 组件页面
}
},

组件内钩子函数

更细的拦截

组件内放钩子

 beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当钩子执行前,组件实例还没被创建
console.log(to.path); // 打印 /helloworld
console.log(from.path); // 打印 /
next(); // 跳转到 /helloworld 指定的页面
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}

路由钩子使用场景: 登录态校验 权限校验等

路由滚动行为

mode为history时有效

scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
//所有路由新页面滚动到顶部:
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
} //如果有锚点
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}

以上滚动目前新版路由已经不支持了

vue-router2的更多相关文章

  1. 【vue】import的使用

    以下是vue默认模板结构,自动加载HelloWorld (1)@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径,是在webpack.base.config.js里面配置好别名 (2)impo ...

  2. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  3. vue 路由demo2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue router应用及总结

    编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...

  5. Vue路由注意事项

    一.vue中路由的使用 1.定义组件 <template> <div class="hello"> <h1 @click="info&quo ...

  6. [转]vue router基本使用

    第一步:安装 cnpm install vue-router --save 路由配置基本语法 router下index.js引入 import Vue from "vue"; im ...

  7. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  8. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  9. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  10. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. How to Pronounce the Numbers 1 – 10

    How to Pronounce the Numbers 1 – 10 Share Tweet Share Tagged With: Numbers Numbers are something you ...

  2. haproxy + nginx + proxy protocol 获得客户真实IP方法

    公司网站架构为: 前面2台HA负载均衡,后面3台Nginx负载均衡反向代理,然后后面有N台WEB服务器 由于要统计IP,需要在WEB服务器日志里体现客户端真实IP 那么问题来了,通过HA代理的HTTP ...

  3. RabbitMQ系列教程之二:工作队列(Work Queues)(转载)

    RabbitMQ系列教程之二:工作队列(Work Queues)     今天开始RabbitMQ教程的第二讲,废话不多说,直接进入话题.   (使用.NET 客户端 进行事例演示)          ...

  4. Java基本语法知识要点

    0x00   一个源文件中有多少个类,在用javac编译后,在同一目录下将产生多少个对应的字节码文件(.class ).类里面不一定要有public static void main(String[] ...

  5. KVM虚拟化技术(二)KVM介绍

    KVM:Kernel Virtual Machine KVM是基于虚拟化扩展的x86硬件,是Linux完全原生的全虚拟化解决方案.部分半虚拟化支持,主要是通过半虚拟网络驱动程序的形式用于Linux和W ...

  6. 第六次Scrum冲刺

    第六次Scrum冲刺 1.成员今日完成情况 队员 今日完成任务 刘佳 前端构建 李佳 后端设计 周世元 数据设计 杨小妮 博客编写 许燕婷 管理团队当日及次日任务 陈水莲 性能测试用例设计 曾丽丽 性 ...

  7. 吴裕雄 python神经网络(7)

    import numpy as npnp.random.randint(0,49,3) # -*- coding:utf-8 -*-import kerasfrom keras.models impo ...

  8. python小数据池概念以及具体范围

    =   赋值符号:        ==  比较值是否相等:   is  比较,比较的是内存地址      ID(内容) 数字,字符串的小数据池 小数据池现象产生的原因,作用: 为了节省内存空间. &l ...

  9. 对于目标识别的一些idea-传递特征的position而不是特征或特征图

    我们在目标识别中通常是识别到目标的,通过proposals回归的方式,但是如果我们可以在 训练过程中识别到特征以后,将特征的位置信息传到下一层网络这样是否会训练收敛更快, 精度更高. 可能这也是以后机 ...

  10. jenkins commande not found

    解决方法: http://www.geekcome.com/content-10-3868-1.html 1.控制台执行 echo $PATH 把输出的这句话复制 2.jenkins->系统管理 ...