详解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的无缝循环新闻列表插件
Mar 07 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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实现简单的随机抽奖小程序
2016/01/05 PHP
php实现学生管理系统
2020/03/21 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
php生出随机字符串
2017/07/06 PHP
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
Javascript中replace()小结
2015/09/30 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
vue 集成jTopo 处理方法
2019/08/07 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
js实现聊天对话框
2020/02/08 Javascript
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python 读入多行数据的实例
2018/04/19 Python
Django在Model保存前记录日志实例
2020/05/14 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
幼师个人总结范文
2015/02/28 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers