詳解Angular6.0使用路由步驟(共7步)
今天寫(xiě)的有點(diǎn)兒多了,前幾天一直寫(xiě)js基礎(chǔ).今天想聊聊angular6.0的路由實(shí)現(xiàn).因?yàn)橛泄疽呀?jīng)開(kāi)始轉(zhuǎn)向angular6.0了.寫(xiě)完趕緊吃飯去了.
聲明一下,以下路由的實(shí)現(xiàn)是基于angular6.0 腳手架 實(shí)現(xiàn)的. 腳手架的安裝方法不在此討論范圍內(nèi).
第一步:創(chuàng)建一個(gè)路由文件.
通過(guò)指令ng g module 模塊名稱;來(lái)創(chuàng)建一個(gè)路由模塊文件;
第二步: 在app.component.html模板文件中,定義路由渲染的位置;
第三步: 引入路由模塊以及路由規(guī)則模塊（在app-routing.module.ts中）;因?yàn)榈谌降降诹蕉际窃谶@個(gè)文件內(nèi)完成的.所以直接上圖;這樣大家看的也更清晰;
第七步: 在app.module.ts中,將路由模塊引入,并寫(xiě)入imports中;
ok,這樣路由就算配置完成了;這里有幾點(diǎn)需要說(shuō)明:
1. angular默認(rèn)的路由采用的是path策略規(guī)則,如果要使用hash規(guī)則,我們可以在forRoot方法中,傳遞配置對(duì)象,設(shè)置;
useHash:true; 相信大家已經(jīng)看到了;
2. 設(shè)置默認(rèn)路由使用"**";這個(gè)一定要記住,是兩個(gè)**.因?yàn)閍ngular1.0是使用的一個(gè)*;
3.設(shè)置重定向通過(guò)redirectTo重定向到默認(rèn)路由;
好了,angular6.0路由的配置就介紹到這里了.希望對(duì)各位小伙伴有幫助.如有不足,歡迎指正;
- 淺談Angular6的服務(wù)和依賴注入
- 基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例
- 在 Angular6 中使用 HTTP 請(qǐng)求服務(wù)端數(shù)據(jù)的步驟詳解
- Angular6中使用Swiper的方法示例
- Angular6筆記之封裝http的示例代碼
- angular6.0開(kāi)發(fā)教程之如何安裝angular6.0框架
- 詳解Angular6 熱加載配置方案
- Angular6封裝http請(qǐng)求的步驟詳解
- Angular6 寫(xiě)一個(gè)簡(jiǎn)單的Select組件示例
- Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄
相關(guān)文章
AngularJS 支付倒計(jì)時(shí)功能實(shí)現(xiàn)思路
這篇文章主要介紹了AngularJS 支付倒計(jì)時(shí)功能的實(shí)現(xiàn)思路,需要的朋友可以參考下2017-06-06
AngularJS 自定義過(guò)濾器詳解及實(shí)例代碼
這篇文章主要介紹了AngularJS 自定義過(guò)濾器,這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09
angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例
本篇文章主要介紹了angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-02-02
angularJS的radio實(shí)現(xiàn)單項(xiàng)二選一的使用方法
下面小編就為大家分享一篇angularJS的radio實(shí)現(xiàn)單項(xiàng)二選一的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Angularjs實(shí)現(xiàn)分頁(yè)和分頁(yè)算法的示例代碼
分頁(yè)是很多web應(yīng)用都會(huì)用到的，本篇文章主要介紹了Angularjs實(shí)現(xiàn)分頁(yè)和分頁(yè)算法的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
這篇文章主要介紹了詳解Angular cli配置過(guò)程記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
angular ng-model 無(wú)法獲取值的處理方法
今天小編就為大家分享一篇angular ng-model 無(wú)法獲取值的處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫(huà)實(shí)例代碼
這篇文章主要介紹了基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫(huà)實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09