vue-router路由屬性配置說明
export default new Router({
mode: 'history', //路由模式，取值為history與hash
base: '/', //打包路徑，默認為/，可以修改
routes: [
{
path: string, //路徑
ccomponent: Component; //頁面組件
name: string; // 命名路由-路由名稱
components: { [name: string]: Component }; // 命名視圖組件
redirect: string | Location | Function; // 重定向
props: boolean | string | Function; // 路由組件傳遞參數
alias: string | Array<string>; // 路由別名
children: Array<RouteConfig>; // 嵌套子路由
beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由單獨鈎子
meta: any; // 自定義標簽屬性，比如：是否需要登錄
icon: any; // 圖標
// 2.6.0+
caseSensitive: boolean; // 匹配規則是否大小寫敏感？(默認值：false)
pathToRegexpOptions: Object; // 編譯正則的選項
}
]
})
一、使用router-link進行路由導航，傳遞參數
=> 父組件中：使用<router-link to="/需要跳轉的路由路徑/需要傳遞的參數"></router-link>標簽進行導航
show是頁面路由路徑，111是需要傳遞的參數
=>子組件中：使用this.$route.params來接收路由參數,這時params是個json的形式，你可以選擇你想要的參數。
=>路由配置文件中：
:id用來為參數占位
=>地址欄中：
在地址欄中顯示傳遞的參數id,即111, ，刷新頁面，參數不丟失
二、直接調用$router.push 實現攜帶參數的跳轉
=> 父組件中：
模板渲染中調用函數，傳遞參數
=> 子組件中：
仍然使用 this.$route.params 獲取參數
=> 路由配置文件中：
:id用來為參數占位
=> 地址欄中：
在地址欄中顯示傳遞的參數id, ，刷新頁面，參數不丟失
三、通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數
=> 父組件中：
使用name來匹配路由
=> 子組件中：
依然使用 this.$route.params 接收參數
=> 路由配置中：
設置name匹配，但是path不需要變量占位
=> 地址欄中：
地址欄中不顯示參數，刷新頁面，參數丟失
四、使用path來匹配路由，然后通過query來傳遞參數，這種情況下 query傳遞的參數會顯示在url后面?id=？
=> 父組件中：
注意這里使用query來傳遞參數！！與上面是不一樣的。
=> 子組件中：
使用 this.$route.query來接收參數,也是個json格式
=> 路由配置文件中：
=> 地址欄中：
參數顯示在地址欄中，刷新頁面參數不丟失
****這里要特別注意 ：在子組件中 獲取參數的時候是\(route.params 而不是\)router ，這很重要~~~
總結：
this.$router.push進行編程式路由跳轉router-link進行頁面按鈕式路由跳轉this.$route.params獲取路由傳遞參數this.$route.query獲取路由傳遞參數params和query都是傳遞參數的，params不會在?后面出現，並且params參數是路由的一部分，使用params傳參的時候在路由配置文件中的ptah里面一定要存在形如:id變量占位的，相當於post請求。query則是我們通常看到的url后面的跟在？后面的顯示參數，使用query傳參的時候在路由配置文件中的ptah里面一定不要存在形如:id變量占位的，相當於get請求