详解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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
js遍历td tr等html元素
Dec 13 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 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
php实现的MySQL通用查询程序
2007/03/11 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
php 可变函数使用小结
2018/06/12 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
react-router中的属性详解
2017/06/01 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python解析树及树的遍历
2016/02/03 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python实现狄克斯特拉算法
2019/01/17 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
校长创先争优承诺书
2014/08/30 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python