vue 路由傳參的方法

1.經過配置路由的name 進行匹配路由，經過params/query達到傳遞參數的效果

//跳轉代碼
this.$router.push({
		    name: 'Detail',
		    params: {
			id: id
			}
		})複製代碼

路由配置

{
    path: '/detail',
    name:'Detail',
    component: Detail
},複製代碼

獲取參數

this.$route.params.id複製代碼

優勢 ：參數不在url裏面顯示

缺點：頁面刷新，參數不存在

query和params用法同樣，只須要把params 改爲 query 

2.經過url傳參

//跳轉代碼
this.$router.push({
		    name: 'Detail',
		    query: {
			id: id
			}
		})複製代碼

路由配置

{
    path: '/detail',
    name:'Detail',//無關緊要
    component: Detail
},複製代碼

獲取參數

this.$route.query.id複製代碼

優勢 ：頁面刷新，參數存在

缺點：參數在url裏面顯示，不美觀

3.直接用$router.push 實現攜帶參數的跳轉

//跳轉代碼
this.$router.push({ path:`../detail/${id}`})複製代碼

路由配置

{
    path: '/detail/:id',
    name:'Detail',//無關緊要
    component: Detail
},複製代碼

獲取參數

this.$route.params.id複製代碼

小結：query在頁面刷新後，參數還存在，可是會在url中展現

params頁面刷新後 參數不存在，會致使報錯