Angular--Angular Route导航

客官°小女子只卖身不卖艺 2021-09-27 08:02 392阅读 0赞

*  前言
 *  内容
    
     *  路由的基础知识
     *  路由重定向
     *  子路由
     *  辅助路由
     *  路由守卫
 *  总结
 *  end

# 前言 #

在很多的程序中，我们可以看到为了封装或者什么的调取数据，这样，从开始到调取数据返回到指定之处显示出来的这个过程中就可以看出来这里有一条路，这就是我们所说的路由。

# 内容 #

Route导航包含的信息比较多，有路由及路由的重定向，子路由、保护路由和辅助路由等方面的，这篇博客简单介绍一下。

## 路由的基础知识 ##

因为之前有篇博客[Angular–路由的基础知识][Angular]，在这篇博客中做了一番路由的基础知识介绍，所以在这里不做过多赘述了。

## 路由重定向 ##

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

> 在输入地址：`www.aaa.com`的时候，按下回车会自动跳转到地址：`www.aaa.com/products`，又比如说，输入地址：  
> `www.aaa.com/x`，按下回车会自动跳转到地址：`www.aaa.com/y`。

也许有些读者会说，在原来的地址中使用的不是好好的吗？为什么要这么麻烦呢！

> 因为现在社会是一个日新月异的时代，科技发展非常迅速，比如说在互联网创办之初，打开网站只能看到密密麻麻的字，一点颜色都没有，等过了几年，网页上面的字体可以更改，颜色可以改变，使得网页变得有阅读性，过了不到几年，可以加入图片之后，使得网页的阅读更多姿多彩，之后的JS、AJAX等之类的使得网页变得更加生动形象，更具有观赏性，但是在原来的那种基础网站部署之上不能支持这些功能，这个时候路由重定向就能发挥出巨大的作用。这是一方面，另一方面当老用户收藏了以前的地址，但是现在网站已经更改了地址，所以当老用户在访问以前的地址的时候，只要检测到了就立马跳转到新的网站地址，打开新的网站。

所以路由的重定向重要性大家应该都清楚了，那么就上核心代码：

constroutes:Routes=[ {path:'',redirectTo:'/home',component:HomeComponent}, {path:'home',component:HomeComponent}, {path:'product/:id',component:ProductComponent}, {path:'**',component:Code404Component}, ];

## 子路由 ##

子路由就是在原来的路由下面增加路径的筛选，当访问的路径为空的时候，保留原来的路径，当访问路径存在的时候再跳转到指定的路径中去，一般用在网站中点击某个BottonLink跳转的时候，BottonLink下的路径没有内容的时候就直接停留在原来的页面上，或者其他用法。  
语法如下：

{ path: 'home', component: HomeComponent}

具体用法如下：

{ path: 'home', component: HomeComponent //在访问home这个路径的时候，会展示HomeComponent组件模版 children: [ //children是数组，在数组里面可以添加标准的路由 { path: '', component: XxxComponent //在路径为空的时候，依旧展示HomeComponent组件模版，但是root那款显示XxxComponent }
      { path: '/yyy', component: YyyComponent //在路径为/yyy的时候，依旧展示HomeComponent组件模版，但是root那款显示YyyComponent }
     ]
    }

## 辅助路由 ##

辅助路由是为了保证在地址失效的情况下点击另一个地方能实现出想通的效果，比如有些按钮点击之后没有用，但是在按钮周围一定范围内点击照样能进入指定的页面内，这就用到了辅助路由，具体语法如下：

<router-outlet></router-outlet>
    <router-outlet name="aux"></router-outlet>
    
    {path: 'xxx',component: XxxComponent, outlet:"aux"}
    {path: 'yyy',component: YyyComponent, outlet:"aux"}
    
    <a[routerLink]= "[ '/home' ,{outlets:{aux: 'xxx'}}]">Xxx</a> <a[routerLink]= "[ '/product' ,{outlets:{aux: 'yyy'}}]">Yyy</a>

## 路由守卫 ##

设置路由守卫是为了在需要的时候知道在何处调用该路由，有如下三种设置的方法：  
`CanActivate`：处理导航到某路由的情况（一个由多个表单组件组成的向导，例如注册流程，用户只有在当路由的组件中填写了满足要求的信息，才可以导航到下一个路由）  
`CanDeactivate`：处理从当前路由离开的情况(当用户未执行保存操作而试图离开当前导航时提醒用户)  
`Resolve`：在路由激活之前获取路由数据（只有当用户已经登录并拥有某些权限时，才能进入某些路由。）

# 总结 #

Route导航这方面的博客我看到有位大神的就非常好！[【Angular】路由 Route导航][Angular_ Route]，有兴趣的读者可以去看看！

# end #

谢谢您的阅读！

[Angular]: https://blog.csdn.net/Luojun13Class/article/details/81813219
[Angular_ Route]: https://blog.csdn.net/wrs120/article/details/78936108