详解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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JavaScript手机振动API
Jun 11 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
axios实现文件上传并获取进度
Mar 25 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实现的下载css文件中的图片的代码
2010/02/08 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
JS控制表格隔行变色
2006/06/26 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
MySQL适配器PyMySQL详解
2017/09/20 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
Python实现微信表情包炸群功能
2021/01/28 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
教师节演讲稿
2014/05/06 职场文书
售票员岗位职责
2015/02/15 职场文书
员工加薪申请报告
2015/05/15 职场文书
民事二审代理词
2015/05/25 职场文书
自书遗嘱范文
2015/08/07 职场文书
国庆节主题班会
2015/08/15 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS