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

路由的别名和重定向

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

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

本文内容目录一览:

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、网件r6900梅林固件怎么设置路由器 2、路由器挂ss教程 3、网件6300v2梅林固件刷好了怎么安装路由器 4、华硕68梅林固件路由器上网怎么...

dir路由器怎么设置密码

dir路由器怎么设置密码

本篇文章给大家谈谈dir路由器怎么设置密码,以及dir600m路由器设置密码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、D-Link路由器如何设置 2、dlink dir 605无线路由器详细设置 3、怎么设置路由器密码 4、D-LINK DIR600...

路由器拔掉怎么重新连接

路由器拔掉怎么重新连接

有很多朋友不知道路由器拔掉怎么重新连接要如何操作,今天为大家整理了很多路由器拔了怎么重新连接相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、路由器拔了线怎么插 2、无线路由器拔掉电源再插上,连不上网 3、路由器拔电源断网后就连不上了怎么办? 4、路由器拔掉后宽带连...

广电换路由器怎么设置

广电换路由器怎么设置

本篇文章给大家谈谈广电换路由器怎么设置,以及广电宽带换路由器怎么设置对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、广电网络怎么设置路由器 2、广电宽带怎么设置路由器 3、广电宽带路由器怎么设置 4、广电宽带怎么连接路由器? 5、广电网络的路由器可以换...

家用路由器无线怎么接

家用路由器无线怎么接

当朋友们看到这个文章时想必是想要了解家用路由器无线怎么接相关的知识,这里同时多从个角度为大家介绍怎样无线接路由器相应的内容。 本文内容目录一览: 1、无线路由器怎么连接 无线路由器连接方法 2、无线路由器怎样连接 3、无线路由器怎么连接 4、家庭宽带如何连接无线路由器 5、路由器怎么...

壁挂路由器面板怎么拆装

壁挂路由器面板怎么拆装

有很多朋友不知道壁挂路由器面板怎么拆装要如何操作,今天为大家整理了很多壁挂路由器面板怎么拆装视频相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、欧普网线面板怎么拆 2、贴在外面墙上圆型路由器怎么拆下耒放在外? 3、tp link 路由器怎么拆解 4、华为b311b...