详解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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
详解JS函数重载
Dec 04 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
JavaScript函数柯里化
Nov 07 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/10/09 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python中hashlib模块用法示例
2017/10/30 Python
Python 12306抢火车票脚本
2018/02/07 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
实习生自我评价
2014/01/18 职场文书
公证委托书格式
2014/09/13 职场文书
学习十八大宣传标语
2014/10/09 职场文书
党员作风建设自查报告
2014/10/23 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
高中军训感想
2015/08/07 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python