欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Angular4学习】--路由重定向

程序员文章站 2022-03-24 19:13:21
...

解决的问题

当我们变更网站地址了之后,如果用户没有收到变更后的新网址,依旧输入了旧网址能访问我们新发布的网站吗? Angular的路由重定向可以帮你实现。

什么是路由重定向?

在用户访问一个特定的地址时,将其重定向到另一个指定的地址。

示例

//当用户访问前者时,路由会自动跳转至后者所指向的页面
www.aaa.com   ==> www.aaa.com/products
www.aaa.com/x  ==> www.aaa.com/y

Demo实现

修改路由配置中的redirectTo属性

const routes: Routes = [ 
//当我访问空字符串路由的时候,我可以重定向到home组件
{path: '', redirectTo:'/home',pathMatch:'full'}, 
//访问home时,跳转home组件
{path: 'home', component:HomeComponent}, 
]

效果展示

在地址栏输入localhost:4200后面跟空字符串路由时,会自动重定向到home,让问home组件,也就是当输入空路由时,自动显示登录。

【Angular4学习】--路由重定向

总结

路由重定向常用于网址变更,或者访问特定页面时我们想要给用户展示特定组件。