详解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 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
vue-model实现简易计算器
Aug 17 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python创建文件备份的脚本
2018/09/11 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python笔记之观察者模式
2019/11/20 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Python调用C/C++的方法解析
2020/08/05 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
应届毕业生个人求职信范文
2014/01/29 职场文书
幼师自我鉴定
2014/02/01 职场文书
安全生产承诺书范文
2014/05/22 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
文明单位申报材料
2014/12/23 职场文书
2015年检验科工作总结
2015/04/27 职场文书