详解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 相关文章推荐
在vs2010中调试javascript代码方法
Feb 11 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
加速XP搜索功能堪比vista
2007/03/22 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php中cookie的使用方法
2014/03/29 PHP
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
vue的基本用法与常见指令
2017/08/15 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
python实现的系统实用log类实例
2015/06/30 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Python使用xpath实现图片爬取
2020/09/16 Python
linux面试相关问题
2012/08/11 面试题
小学国庆节活动方案
2014/02/11 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
2014全国两会心得体会
2014/03/17 职场文书
青年文明号口号
2014/06/17 职场文书
银行求职自荐书
2014/06/25 职场文书
专项资金申请报告
2015/05/15 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python