【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组件,也就是当输入空路由时,自动显示登录。
总结
路由重定向常用于网址变更,或者访问特定页面时我们想要给用户展示特定组件。
推荐阅读
-
vue-router重定向和路由别名的使用讲解
-
Linux学习笔记(十)shell基础:历史命令、命令补全、输出重定向、输出重定向
-
网管学习:路由器封P2P的终极方案
-
Angular2学习笔记——详解路由器模型(Router)
-
对angular4子路由&辅助路由详解
-
vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )
-
微信小程序开发--路由切换,页面重定向
-
Angular4.x通过路由守卫进行路由重定向,实现根据条件跳转到相应的页面
-
vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
-
vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))