详解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编程起步(第七课)
Feb 27 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
第十四节--命名空间
2006/11/16 PHP
浅析PHP水印技术
2007/02/14 PHP
PHP如何编写易读的代码
2007/07/10 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP数组实例总结与说明
2011/08/23 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python实现决策树分类(2)
2018/08/30 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
优秀教师个人材料
2014/12/15 职场文书
安全生产会议制度
2015/08/06 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
python 网络编程要点总结
2021/06/18 Python