3 2 路由 路由物件詳解 caiyuen

2022-09-23 23:24:08 字數 1034 閱讀 3283

1. router

app-routing.moudle.ts中配置 routes

1 const routes: routes = [

2 ,

3

4 ];  注意:

1.path中,不能用 / 開頭。

2.routes中放的是路有物件,路由物件可以有多個,每乙個路由物件至少包含兩個屬性,

乙個屬性為path 即路由的路徑,乙個屬性為路由下級的元件。

2.routeroutlet佔位符

routeroutlet佔位符存放在模組的元件模板中,宣告路由配置中配置的元件模板將要放在什麼位置

1 3.routerlink 鏈結

一般在a標籤中作為乙個屬性用,起到點選後鏈結頁面的左右

1 主頁

2 商品詳情  注意:

1. 此時裡面的路徑必須使用帶 / 的,表示使用根路由。

2.使用routerlink時注意,引數是乙個陣列,陣列中可以帶有其他資訊

3.routes + routeroutlet + routerlink :可以組成乙個跳轉回路,完成所需的跳轉。

4.router 控制器

在主模板中:新增按鈕和點選方式:

1  在控制器中,編寫方法,方法中存放路由位址

1 export class appcomponent

5 toproductdetails()

8 }  其中:

構造器中可以獲取到路由

點選事件中使用路由的n**igate()方法可以傳入位址引數。

routes + routeroutlet + router(控制器中) :可以組成乙個跳轉

5.activatedroute

activatedroute 獲取啟用路由物件中攜帶的引數

1、構造器獲取activatedroute啟用路由物件

1 constructor(private routeinfo: activatedroute)     2、初始化資料時獲取引數中的資料

1 ngoninit()

3 1 路由 路由物件 caiyuen

routes 路由配置,儲存這哪個url對應展示哪個元件,以及在哪個routeroutlet中展示元件 routeroutlet 在html中標記路由內容呈現位置的佔位符指令 router 負責在執行時執行路由的物件,可以通過呼叫其n igate 和n igatebyurl 方法來導航到乙個指定的路...

thinkphp3 2 路由解析

通過url 位址get 引數找到指定的控制器,並進行對應方法呼叫請求 模組名稱 c 控制器 a 方法 以上url 位址資訊 不夠優雅 不安全。tp框架 url位址可以由以下四種 1.http index.php?m xx c xx a xx 基本get模式 index.php 模組 控制器 操作方法...

vue 2 0路由之路由巢狀示例詳解

前言 方法如下 1 引入依賴庫就不必再說 2 建立元件 兩種寫法 第一種 間接 var about vue.extend 第二種 直接 var out vue.extend 3 建立 router 例項,傳 routes 路由對映配置 var router new vuerouter 設定預設路徑 ...