详解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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
js图片上传的封装代码
Aug 01 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
基于Cesium绘制抛物弧线
Nov 18 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中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php语法检查的方法总结
2019/01/21 PHP
php获取微信openid方法总结
2019/10/10 PHP
许愿墙中用到的函数
2006/10/07 Javascript
js DOM的学习笔记
2011/12/22 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python出现segfault错误解决方法
2016/04/16 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
个人简历自我鉴定
2013/10/11 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
迟到检讨书300字
2014/02/14 职场文书
初中新生军训方案
2014/05/13 职场文书
2015入党自荐书范文
2015/03/05 职场文书
清洁工个人工作总结
2015/03/05 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js