详解Angular6.0使用路由步骤(共7步)


Posted in Javascript onJune 29, 2018

今天写的有点儿多了,前几天一直写js基础.今天想聊聊angular6.0的路由实现.因为有公司已经开始转向angular6.0了.写完赶紧吃饭去了.

声明一下,以下路由的实现是基于angular6.0 脚手架 实现的. 脚手架的安装方法不在此讨论范围内.

第一步:创建一个路由文件.

通过指令ng g module 模块名称;来创建一个路由模块文件;

详解Angular6.0使用路由步骤(共7步)

第二步: 在app.component.html模板文件中,定义路由渲染的位置;

详解Angular6.0使用路由步骤(共7步)

第三步: 引入路由模块以及路由规则模块(在app-routing.module.ts中);因为第三步到第六步都是在这个文件内完成的.所以直接上图;这样大家看的也更清晰;

详解Angular6.0使用路由步骤(共7步)

第七步: 在app.module.ts中,将路由模块引入,并写入imports中;

详解Angular6.0使用路由步骤(共7步)

ok,这样路由就算配置完成了;这里有几点需要说明:

1. angular默认的路由采用的是path策略规则,如果要使用hash规则,我们可以在forRoot方法中,传递配置对象,设置;

useHash:true; 相信大家已经看到了;

2. 设置默认路由使用"**";这个一定要记住,是两个**.因为angular1.0是使用的一个*;

3.设置重定向通过redirectTo重定向到默认路由;

好了,angular6.0路由的配置就介绍到这里了.希望对各位小伙伴有帮助.如有不足,欢迎指正;

Javascript 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 #Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 #Javascript
Vue表单demo v-model双向绑定问题
Jun 29 #Javascript
vue底部加载更多的实例代码
Jun 29 #Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 #Javascript
vue项目打包后打开页面空白解决办法
Jun 29 #Javascript
You might like
世界第一个无线广播电台 KDKA
2021/03/01 无线电
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
django 读取图片到页面实例
2020/03/27 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
秋季运动会广播稿
2014/02/22 职场文书
安全生产专项整治方案
2014/05/06 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
青年志愿者活动方案
2014/08/17 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
父亲去世追悼词
2015/06/23 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
JavaScript组合继承详解
2021/11/07 Javascript