學習要點：1.重定向 2.元件傳參
本節課我們來開始了解 Vue router 的重定向群組件傳參。
一．重定向
1. 使用 redirect，可以配置路由的重定向功能，有多種方式；
{ //當位址為/a 則跳轉到首頁 path : '/a', redirect : '/'},
{ //跳轉到指定 name 的元件 path : '/a', redirect : { name : 'List' //或者 path 也支援 }},
2. 如果你要動态的處理跳轉的路徑，也就是支援邏輯判斷，具體如下：
3. 路由可以設定别名，具體如下：
二．元件傳參
1. 需求：我們希望 User/5 中擷取 id 時變成{{id}}而不是{{$route.params.id}}；
2. 有幾種模式，先采用布爾模式，将路由規則增加一個屬性：props:true；
//router/index.js{ path: '/user/:id', name: 'User', component: User, //這裡布爾為 true 時，route.params 變成元件屬性 props : true,}//User.vue <div> <h3>User Id : {{id}}h3> <router-view>router-view> div>template> export default { name: "User", props : ['id'] }</script>
3. 除了布爾模式，還有對于靜态路由，可以使用對象模式；
//支援非命名視圖的對象模式props : { data: '清單'},
<template> <h3>這裡是 List 頁面 : {{data}}h3>template>
<script>export default { name: "List", props : { data: { type : String, default : 'no data' } }}script>
//如果是命名視圖，則需要特别指定哪個視圖使用
props : { default : { name : '清單' }},
4. 如果采用經典的 query 進行傳參，我可以使用如下方法：
如果您覺得有用，記得在下方點贊、關注、留言，小編會定期奉上更多的驚喜哦，您的打賞支援才是小編繼續努力的動力，麼麼哒。
每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術，陪有夢想的人一起成長！