详解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+CSS控制打印格式示例介绍
Jan 07 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
详解基于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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Django 路由层URLconf的实现
2019/12/30 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
新学期班主任寄语
2014/01/18 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
长城导游词400字
2015/01/30 职场文书
高二语文教学反思
2016/02/16 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle