路由守卫有哪些

vue路由守卫哪几种？

vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫。

所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告诉你下一步该怎么做？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。

// 通过这个匹配判断是否有该权限或要求，这个一般作为页面权限设置，比如哪些页面需要登录才能进入，哪些不需要

tomatchedsome(res => resmetarequireAuth)

一、全局路由守卫

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查

全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫

routerbeforeEach((to, from, next) => {

consolelog(to) => // 到哪个页面去？

consolelog(from) => // 从哪个页面来？

next() => // 一个回调函数

}

routerafterEach（to，from） = {}

next()：回调函数参数配置

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 routerpush 中的选项

二、组件路由守卫

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

beforeRouteEnter (to, from, next) {

// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例

next(vm => {})

}

beforeRouteUpdate (to, from, next) {

// 同一页面，刷新不同数据时调用，

}

beforeRouteLeave (to, from, next) {

// 离开当前路由页面时调用

}

三、路由独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

Route 命令是linux下设置网络和调试网络的主要工具，是在本地 IP 路由表中显示和修改条目网络命令。

命令的使用方法：

1、命令说明：

route命令用来显示和 *** 作IP路由表，用来通过一个已经利用ifconfig命令配置好的网络接口为指定主机或网络设置静态路由。当使用add或del选项时，route命令修改路由表，否则显示路由表当前内容。

2、使用说明：

1）查看路由表信息 route [-CFvnee]

选项说明：

-F 显示核心的FIB（转发信息库）路由表信息。此为默认选项。

-C 显示内核路由缓存信息

-v 显示详细信息

-n 采用数字IP地址以代替试图去确定主机名。

在查看路由表时，最好采用此参数避免域名解析以提高查询速度。

-e 使用netstat格式显示路由表

-ee将产生一个包含所有路由表参数的输出列表。

2）增加和删除路由

route [-v] [-A family] add [-net|-host] target [netmask Nm] [gw Gw

[metric N] [mss M] [window W] [irtt I] [reject] [mod] [dyn]

[reinstate] [[dev] If]

route [-v] [-A family] del [-net|-host] target [gw Gw] [netmask Nm

[metric N] [[dev] If]

route add default gw {IP-ADDRESS} {INTERFACE-NAME}

增加默认网关

IP-ADDRESS: 路由IP地址

INTERFACE-NAME: 网络接口名，如eth0

default 是 target的一种特殊取值。

选项说明：

-A family 指定地址系列（例如‘inet’；使用 route --help 查看取值的全部列表）

del 删除一个路由

add 增加一个新的路由

target 目标网络或主机，可以是IP地址或主机/网络名的形式。

-net 目标为网络，如19216810

-host 目标为主机

netmask NM 当增加网络路由时，指定网络掩码

gw GW 路由数据包通过一个网关。

注意：指定的网关必须首先要可达。这意味路由到网关前要设置一个静路由。如果指定的地址是一个本地网络接口，它将被用来确定那些数据包可以被路由到此接

metric M 设置路由表中的代价域（metric field）为M。

mss M 设置最大传输单位（MTU）值，单位为字节。注意：路由命令当前的实现 不运行利用此项设置最大段大小（MSS）。

window W 设置基于此路由连接的TCP 窗口大小，单位为字节。这个选项典型只应 用在AX25网络并且驱动不能处理连续帧。

irtt I 设置基于此路由的连接的初始往返时间（irtt），单位为毫秒（1-12000）这 个选项典型应用在AX25网络。如果忽略此项，使用RFC1122默认值(300ms)

reject 安装一个阻塞路由，这将迫使一个路由查找失败。这可在使用默认路由前作 为屏蔽网络的例子。

mod, dyn, reinstate 安装一个动态或修改的路由。这些标志应用于诊断目的，通常 有路由守护进程来设置。

dev If 强制路由与指定的设备关联。如果dev是命令行最后一个选项，则dev可以 忽略

3）显示版本或帮助

route [-V] [--version] [-h] [--help]

3、命令例子：

1）增加到19216810网络的路由

route add -net 19216810 netmask 2552552550 dev eth0

route add -net 19216810/24 dev eth0

2）增加默认网关

route add default gw mango-gw

备注：默认网关可以有多个。

3）增加到主机ipx4的路由

route add ipx4 sl0

增加基于SLIP（Serial Line Internet Protocol）接口到主机ipx4的路由。

这里假设ipx4是SLIP主机

4）增加基于前一个例子建立的路由到SLIP接口的网络路由

route add -net 19216820 netmask 2552552550 gw ipx4

5）设置拒绝路由

route add -net 10000 netmask 255000 reject

6）删除路由

route del -net 19216810 netmask 2552552550 dev eth0

route del default gw 19216813 --删除默认网关

4、输出信息

通过route命令输出的内核路由表包含以下列：

1）Destination 目标（网络或主机）目标网络或主机，用IP网络地址的形式显示

2）Gateway 网关地址，如果没有指定，显示为‘’

3）Genmask 网络掩码

目标网络的掩码；如果目标为主机，则显示’255255255255’

如果目标为网关，则显示 ’0000’

4）Flags 标识

可能的取值包括：

U 路由已经启动

H 路由目标为主机

G 使用网关

R 为动态路由复原路由表

D 由守护进程或间接动态安装

M 被路由守护进程或间接修改

A 通过addrconf修改

C 缓存条目

! 拒绝路由

5）Metric 到目标的‘距离’（通常基于跳数统计）。

6）Ref 参考此路由的数量。

7）Use 路由查找计数。依赖与使用-F 还是-C选项

8）Iface 此路由数据包发送到的网络接口。

9）MSS 基于此路由的TCP连接默认最大段大小

10）Window 基于此路由的TCP连接默认窗口大小

11)irtt 初始往返时间。内核使用此值在不需要等待响应的情况下推测最佳TCP协议参数

1、vue routerbeforeEach（全局前置守卫）

beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。

它的三个参数：

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）

from: (Route路由对象) 当前导航正要离开的路由

next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) 必须调用

next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）

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

2、vue routerafterEach（全局后置守卫）

routerbeforeEach 是页面加载之前，相反routerafterEach是页面加载之后

你可以在路由配置上直接定义 beforeEnter 守卫：

这些守卫与全局前置守卫的方法参数是一样的。

(一) 清除当前组件中的定时器

当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:

(二) 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转

如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有d出框的情况 应该阻止用户跳转，结合vuex状态管理（dialogVisibility是否有保存）

(三) 保存相关内容到Vuex中或Session中

当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中

第一种情况就是以path形式

第二种情况就是以路由对象Object的形式

注意这里的name指的是具名路由，在路由列表中的配置如下

而WuHan则是这个路由要抵达的模板或者说页面，定义如下

注意由于在<router-link>中是通过query的形式区传递参数，所有在目的地页面中也只能采用query的形式获取参数。

也可以不采用query的方法，而采用params的形式传递参数

那么在在路由列表中的path中必须带上params传递过来的参数，否则在目的页面中无法获取参数

在目的页面中以params的形式获取参数对应的值

注意事项：不可以在<router-link>的路由对象中同时出现path和params，此时params作废。目的页面中获取不到参数。

推荐是name和params搭配，path和query搭配。最好时不用params而只是用query的形式传递参数以及获取参数，

因为采用params的方式传递参数，当你进入到目的页面后确实能够正确地获取参数,但是，当你刷新页面时，参数就会丢失。

所以推荐使用query地形式传递参数。

最后谈谈 route地区别。结论：没有任何关系。

router是实现路由跳转的， route。

或者是 routeparamscity。也就是说， route作用在路由不同的阶段。

原文： >

那，因为只用到过组件内的路由守卫，所以只有这一部分的输出