1. 程式人生 > 其它 >vue基礎(1.路由)

vue基礎(1.路由)

vue主要包括的內容(框架):

    vue3專案中如何配置路由、

    動態路由、

    動態路由切換時的特點、

    狀態管理庫vuex、

    vue3合成API----setup()

一、vue3專案中如何配置路由

1.下載vue-router,在路由檔案中引入相關依賴

2.建立路由資訊物件陣列

3.建立路由管理器物件並對外丟擲

4.在main.js使用use(router)方法,將路由管理器物件與當前vue專案相關聯

5.在專案中設定路由導航router-link與路由出口router-view

二、動態路由

動態路由的定義:

一個路徑引數使用冒號標記

可以在一個路由中設定多段路徑引數

動態路由的傳參:

1.  params傳參:

傳輸引數:

接收引數:

2.  props傳參:

①定義動態路由(props值為布林值時):

傳輸引數:與params方式相同

接收引數:

②定義動態路由(props值為函式時):

定義動態路由:

傳輸引數:

接收引數:

三、動態路由切換時的特點

動態路由當路由發生切換時,並不會重新渲染路由元件,而會使用已經渲染過的路由元件(只是會修改路由引數值),這樣增加了程式的高效及時性;

另一方面,元件的生命週期鉤子回撥函式將不會再次呼叫。