6.路由守卫
2018-02-03 本文已影响0人
Monee121
canActivate实例
在app新建一个目录,guard,新建一个ts.
![](https://img.haomeiwen.com/i2908576/01242a7c5d11c12e.png)
![](https://img.haomeiwen.com/i2908576/a2b1740f1a07bef0.png)
效果:
![](https://img.haomeiwen.com/i2908576/b50612e4db2146bd.png)
反之,当随机数小于0,然后商品详情区展示。
canDeactivate守卫实例
提醒用户执行保存操作才能离开当前页面。
![](https://img.haomeiwen.com/i2908576/7088f53319d6accd.png)
![](https://img.haomeiwen.com/i2908576/4699b802f46928b3.png)
效果如下:
![](https://img.haomeiwen.com/i2908576/a16dd981e8a129c1.png)
知识点
只有当用户已经登录并拥有某些权限时才能进入某些路由。
一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。
当用户未执行保存操作而试图离开当前导航时提醒用户。
钩子是路由守卫
![](https://img.haomeiwen.com/i2908576/27471f4aa7cb5f97.png)
符号前后都有空格,中文引用用单引号。有时候用const代替let.类后的{}前要空格