详解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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
js中style.display=""无效的解决方法
Oct 30 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
小程序实现多选框功能
Oct 30 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 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获取指定范围内最接近数的方法
2015/06/02 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
理解Javascript闭包
2013/11/01 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Vue实现导出excel表格功能
2018/03/30 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
Python while 循环使用的简单实例
2016/06/08 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python读取文件名称生成list的方法
2018/04/27 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python PIL库图片灰化处理
2020/04/07 Python
django实现日志按日期分割
2020/05/21 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
公民代理授权委托书
2014/09/24 职场文书
联村联户简报
2015/07/21 职场文书
保姆聘用合同
2015/09/21 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书