详解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检测客户端不是firefox则提示下载
Apr 07 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
jQuery返回定位插件详解
May 15 jQuery
vuejs选中当前样式active的实例
Aug 22 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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统计二维数组元素个数的方法
2013/11/12 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
vue实现数据控制视图的原理解析
2020/01/07 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python Flask基础教程示例代码
2018/02/07 Python
Django中Forms的使用代码解析
2018/02/10 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
项目经理岗位职责
2013/11/11 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
办公室岗位职责
2015/02/04 职场文书
商务英语求职信范文
2015/03/19 职场文书
CAD实训总结范文
2015/08/03 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis