当前位置:首页 > wifi设置知识 > 正文内容

路由的别名和重定向

秋天2023年02月12日 04:40:13wifi设置知识512

当朋友们看到这个文章时想必是想要了解路由的别名和重定向相关的知识,这里同时多从个角度为大家介绍路由器 域名重定向相应的内容。

本文内容目录一览:

Vue路由重定向、别名与导航守卫

在实际的场景中,当用户访问的是一个页面,但可能出现了一些错误,需要给他呈现另一个页面。或者,当用户的注册状态已经过期,需要跳转到登录页,让用户登录后使用。这些场景下就需要用到路由重定向。别名可以理解为重定向的一种,只不过他的 url 是不改变的,也就是说,表面上的 url 不变,但实际上去的是其他页面。导航守卫可以结合登录来说,例如现在有一个后台管理系统,不登录、非管理人员不予呈现页面。在他访问站点时,先进行登录状态的判断,如果没有登录,则重定向到登录页,其他的页面坚决不可以呈现。这就是导航守卫。

重定向的实现很简单,只需要在路由表中使用 redirect 属性就好:

redirect 后面可以跟路径,也可以跟路由名,甚至可以跟一个函数,函数返回一个路径。但一般直接使用路径,毕竟功能一样的情况下,肯定选择写得最少的那个。

官网描述:/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

尽管表面访问的是 /a ,但实际上呈现的页面是 /b ,不过在路径显示上依然显示 /a 。别名使用属性 alias 实现。

Vue导航守卫这一章节的文档一开头就给我们说:参数的改变并不会触发导航守卫,要想监听路由的变化并做出相应的操作,就必须使用 watch 方法或者 beforeRouteUpdate() 。

不过这并不是今天的主题。回到导航守卫,我们前面讲过一点导航守卫的作用:导航守卫在于保护页面,没有权限的用户或者被限制部分权限的用户在访问网站或者某些页面时是不被允许的。一般情况下,大家面临最多的情况是用户未登录或登录过期时需要调用全局导航守卫,直接跳转到登录页面,引导用户进行登录:

可能还是有人不太懂,对此体会不深,觉得比较飘渺,貌似自己没遇到过。那可以想象以下场景,你在某个人那里得到一个网站的链接,但是这个链接的路径不是网站的首页,而是那个人登录后访问了页面复制给你的链接,这时你打开这个链接,网站检测到你没有登录,便会跳转到登录页。可以拿一个视频网站来试试。

既然有全局导航守卫,就会有相应的局部导航守卫。所谓局部,也就是指组件内的导航守卫了。这里的守卫主要是用于监测路由导航到该组件的进程,并在进程中做一些操作,类似于生命周期钩子函数:

可以看到 beforeRouteUpdate 这个方法,我们在本节开头讲过。三个守卫分别对应导航前、导航中、导航后。 beforeRouteUpdate 的用法正如前面演示的那样,用于组件内监测路由变化,并做出相应操作。 beforeRouteLeave 则可以用于禁止用户在还未保存修改前突然离开。

其他的导航守卫这里便不在做演示了,在平时开发中这几个守卫比较常用,有需要有兴趣的同学可以去官网或视频网站找找相关教学。

什么是路由重定向?ICMP为重定向产生的报文格式是什么?

路由重定向:

表示将你原来在转发列表中发向一台路由的路径改成另外一条路径,也就相当于让你的数据走另外一条路到服务器。

好处和坏处:当一个路由出现问题的时候,会自动重定向到另外一个路由上去,保证你的数据畅通。坏处:可能会出现一定的延时,造成网速变慢。但是一切都是由路由的路由表自动控制的

ICMP为重定向产生的报文格式:

各种ICMP报文的前32bits都是三个长度固定的字段:type类型字段(8位)、code代码字段(8位)、checksum校验和字段(16位)8bits类型和8bits代码字段:一起决定了ICMP报文的类型。

Vue路由 重定向和 别名的区别

重定向

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:

const router = new VueRouter({

routes: [

{ path: '/a', redirect: '/b' }

]

})

重定向的目标也可以是一个命名的路由:

const router = new VueRouter({

routes: [

{ path: '/a', redirect: '/b' }

]

})

甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({

routes: [

{ path: '/a', redirect: to = {

// 方法接收 目标路由 作为参数

// return 重定向的 字符串路径/路径对象

}}

]

})

注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

其它高级用法,请参考例子。

别名

『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?

/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

上面对应的路由配置为:

const router = new VueRouter({

routes: [

{ path: '/a', component: A, alias: '/b' }

]

})

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

路由的别名和重定向的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于路由器 域名重定向、路由的别名和重定向的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由路由设置网发布,如需转载请注明出处。

本文链接:https://www.shoulian.org/luyou/post/7016.html

分享给朋友:

“路由的别名和重定向” 的相关文章

怎么把路由器完全重置

怎么把路由器完全重置

针对怎么把路由器完全重置这个问题,本文将综合不同朋友对这个如何将路由器重置的知识为大家一起来解答,希望能帮到大家 本文内容目录一览: 1、路由器怎么恢复出厂设置? 2、路由器怎么重置恢复出厂设置 3、路由器如何重置? 4、如何重置无线路由器 5、如何重置路由器 路由器怎么恢复出厂设...

怎么选路由器最合适

怎么选路由器最合适

今天给各位分享怎么选路由器最合适的知识,其中也会对怎么选路由器好进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站 本文内容目录一览: 1、家用路由器怎么选 2、怎么挑选无线路由器 3、路由器选什么样的好 4、如何正确挑选家用路由器 5、怎么选择路由器? 家用路由器怎么选 路...

怎么固定无线路由器

怎么固定无线路由器

针对怎么固定无线路由器这个问题,本文将综合不同朋友对这个路由器怎么设置固定设备连接的知识为大家一起来解答,希望能帮到大家 本文内容目录一览: 1、固定IP如何设置无线路由器 2、怎么才能固定无线路由器的IP? 3、电脑用的是固定的IP 怎么设置无线路由器 4、路由器固定ip怎么设置 固...

电信路由器怎么查询余额

电信路由器怎么查询余额

当朋友们看到这个文章时想必是想要了解电信路由器怎么查询余额相关的知识,这里同时多从个角度为大家介绍电信网怎么查余额相应的内容。 本文内容目录一览: 1、怎么查电信宽带余额? 2、只有电信宽带帐号怎么查询余额 3、怎么在网上查电信宽带余额? 4、手机怎么查电信宽带 5、手机怎么查电信宽...

怎么设置路由器插线

怎么设置路由器插线

有很多朋友不知道怎么设置路由器插线要如何操作,今天为大家整理了很多无线路由器怎么插线相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、路由器怎么插线? 2、路由器怎么插线 插线的方法介绍 3、无线路由器如何插线? 4、TP-LINK路由器的线怎么插? 路由器怎么插...

微猫怎么接路由器

微猫怎么接路由器

本篇文章给大家谈谈微猫怎么接路由器,以及猫接路由器怎么接对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、猫与路由器怎么连接 2、猫怎么连接无线路由器 3、中国联通的这个有路由器功能的猫怎么再接一个路由器 4、路由器跟猫怎么连接 5、猫上怎么连接路由器...