路由的别名和重定向
当朋友们看到这个文章时想必是想要了解路由的别名和重定向相关的知识,这里同时多从个角度为大家介绍路由器 域名重定向相应的内容。
本文内容目录一览:
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,而不是受限于配置的嵌套路由结构。
路由的别名和重定向的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于路由器 域名重定向、路由的别名和重定向的信息别忘了在本站进行查找喔。