想利用暑假時間好好學習一下vue，會記錄每一天的學習内容。
今天是學習vue的第
11
天！
起起伏伏乃人生常态，繼續加油～
學習内容
- 1. router-link屬性
-
- tag
- replace
- active-class
- 2. 通過代碼跳轉路由
- 3. 動态路由
-
- 具體實作
- 4. 路由的懶加載
-
- 懶加載的方式
- 5. 嵌套路由
-
- 具體實作
- 6. 路由的參數傳遞
-
- 傳遞參數的方式
1. router-link屬性
在前面的
<router-link>
中，我們隻是使用了一個屬性：
to
，用于指定跳轉的路徑
<router-link to="/Home">首頁</router-link>
<router-link to="/About">關于</router-link>
<router-link>
還有一些其他屬性
tag
tag
：可以指定
<router-link>
之後渲染成什麼元件，如果不想要其預設渲染出的
<a>
，比如渲染成
<button>
<router-link to="/Home" tag="button">首頁</router-link>
<router-link to="/About" tag="button">關于</router-link>
replace
replace
：不會留下history記錄，是以指定
replace
的情況下，浏覽器的後退鍵被禁用，無法傳回到上一個頁面中(預設應該用的是
pushState()
)
active-class
active-class
：當
<router-link>
對應的路由比對成功時，會自動給目前元素設定一個類為
router-link-active
- 某些需要高亮顯示的導航菜單可能會使用到該類
可以在
<router-link>
中設定
active-class
可以修改預設名稱
<router-link to="/Home" tag="button" replace active-class="active">首頁</router-link>
<router-link to="/About" tag="button" replace active-class="active">關于</router-link>
也可以通過在
router
執行個體中設定
linkActiveClass
修改預設名稱
（但是通常不會改類名，直接叫
router-link-active
就好）
2. 通過代碼跳轉路由
有時候，頁面的跳轉可能需要執行對應的一些js代碼，這時候就可以使用第二種跳轉方式：
這裡使用了
.$router.push()
，同樣也可以用
.$router.replace()
，效果是一樣的，隻是無法後退頁面
但是這樣還有一個小問題，就是當我們重複點選同一個導航時，控制台會報出錯誤。
大概是vue為了避免重複點選相同路由的一種警告機制(?，雖然不會影響頁面效果，但是放着不管也不太好。解決方法應該不少，我這裡通過在代碼中加了判斷句來解決：
3. 動态路由
在某些情況下，一個頁面的
path
路徑可能是不确定的，比如我們進入使用者個人界面時，希望是如下的路徑：
- /user/aaaa或/user/bbbb
- 除了有前面的
/user
使用者的ID
- 這種path和Component的比對關系，我們稱之為動态路由(也是路由傳遞資料的一種方式)
具體實作
在路由映射配置中添加如下配置：
:
後的名字可以自取，不一定是
UserId
使用
<router-link>
，
to
屬性是用于指定連結，我們這裡的連結其實應該不是固定的，比如
/User/
後接的應該是某個使用者的
id
，是以應該用
v-bind
動态綁定
to
屬性：
（
/User/
在此處是固定的，放單引号裡就ok）
特别⚠️一下：
data
是個函數，不要寫成對象！
成功顯示：
如果想把這個URL上的userid顯示在頁面中：在
User.vue
中利用
$route.params
看一下目前會顯示什麼
我們想拿到的是這個對象的值，是以應該改為：
{{$route.params.UserId}}
這個
params
後面接的也就是我們在路由映射配置中的
:
後的名字：
當然了這個url中的userid也可以通過location對象擷取，再截取就好了
這裡隻是提供一種方法
4. 路由的懶加載
當打包建構應用時，Javascript包會變得非常大，影響頁面加載
- 如果我們能把不同路由對應的元件分割成不同的代碼塊，然後
當路由被通路的時候才加載對應元件
說得通俗點：
我們知道路由中通常會定義很多不同的頁面，一般情況下頁面是放在一個js檔案中，但是那麼多的頁面放在一個js檔案中，必然會造成這個頁面非常大
如果我們一次性從伺服器請求下來這個頁面，可能需要花費一定的時間，甚至使用者螢幕可能出現短暫的空白
要避免這種情況，使用路由懶加載就可以了
路由懶加載：
- 主要作用是将路由對應的元件打包成一個個的js代碼塊
- 隻有在這個路由被通路到的時候，才加載對應的元件
懶加載的方式
方式一：結合Vue的異步元件和Webpack的代碼分割
（早期寫法，不推薦，認識即可）
方式二：AMD寫法
方式三：在ES6中，我們可以有更簡單的寫法來組織Vue異步元件和Webpack的代碼分割
這裡我們選用ES6的方式：
（但我統一放到了上面，便于一起管理）
然後再打封包件，對比未使用懶加載之前的
dist
檔案夾，會發現新生成的
dist
檔案夾中多了6個檔案，應該就是三個元件及其對應的map檔案
前：
後：
5. 嵌套路由
嵌套路由是個很常見的功能：
- 比如在home頁面中，我們希望通過
/home/news
/home/message
- 由于一個路徑映射一個元件，是以通路這兩個路徑也會分别渲染兩個元件
路徑群組件的關系如下：
實作嵌套路由的步驟：
- 第一步：建立對應的子元件，并且在路由映射中配置對應的子路由
- 第二步：在元件内部使用
<router-view>
具體實作
我們就實作上面那個例子：
第一步：
先建立兩個元件檔案：
配置路由映射：
要放在元件Home的對象裡（注意news和messages跟其他元件并不是同級關系）
使用這個
children
屬性來放一些子元件，同樣也是一個映射關系一個對象
⚠️⚠️：子路由的路徑不要加斜杠，也不用加
/Home
啥的
(同樣也采用路由的懶加載)
第二步：
我們需要用
<router-view>
來顯示這兩個子元件，那麼應該把它放在哪裡？
此時放在
App.vue
顯然是不合适的，因為這個
<router-view>
是負責顯示父級導航的内容
應該把它放在這兩個子元件的父元件，
Home.vue
檔案中，而且要使用一下
<router-link>
來當導航
現在已經可以成功切換并顯示了：
但是依然有不足，這個問題上面也提到過，當顯示Home頁時，也應該要将新聞頁預設顯示出來
其實就是配置路由的預設路徑，在前面我們已經學過，隻是子元件是放在
children
屬性裡，父元件是放在
routes
屬性裡
6. 路由的參數傳遞
當我們切換元件時，我們可能希望傳遞一些參數
傳遞參數的方式
傳遞參數主要有兩種類型：
params
和
query
params
類型：
- 配置路由映射的格式：
/router/:id
- 傳遞的方式：在
to
- 傳遞後形成的路徑：/router/123，/router/abc
query
類型：
- 配置路由映射的格式：
/router
- 傳遞的方式：在對象中使用
query
key
- 傳遞後形成的路徑：/router?id=123，/router?id=abc
params
類型其實前面userid那裡用過，這裡就用
query
類型：
(我建立了一個Profile元件，并且已經做好了相關配置，跟前面一樣的操作)
然後如果想要傳遞參數，
to
屬性的值不能是個字元串了，必須是個對象，而且注意要用v-bind動态綁定
to
屬性，才能使對象生效
path
屬性自然就是要跳轉的連結，而
query
屬性對應的也是一個對象
<!-- <router-link to="/profile">檔案</router-link> -->
<router-link :to="{path: '/profile', query: {name: 'AIpoem', age: 19, height: 1.88}}">檔案</router-link>
可以看到路徑已經成功變化了：
如果想拿到
query
：
用
$route.query
就可以
(同理，
params
用
$route.params
)
如果進行跳轉的時候，不是通過
<router-link>
，而是通過代碼跳轉呢？
比如這裡用一個button，希望在跳轉的同時傳遞一些資料過去：
還記得上面的
$router.push
嗎？
同理可得：隻是這裡要傳一個對象進去
profileClick() {
this.$router.push({
path: '/profile',
query: {
name: 'AIpoem',
age: 19,
height: 1.88
}
})
}