Vue 路由轉跳及傳遞參數

使用params

使用這個，需要提前在路由中配置

url的表現形式

http://localhost:8080/#/detail/1

路由配置

{
    name:"detail",
　　path:'/detail/:id',
　　component: detail,
}

js實現

this.$router.push({
　　　　name: 'detail', 
　　　　params:{id: item.id}
　　 });

頁面中傳遞參數

<router-link :to="{ name:'detail', params: {id: item.id} }"></button>顯示<button></router-link>

<router-link :to="`/detail/${item.id}`"><button>顯示</button></router-link>

獲取參數

this.$route.params.id

使用query

使用這個，不需要在路由中配置

url的表現形式

http://localhost:8080/#/detail?id=1

路由配置

{
　　 path:'/detail',
　　 component: detail,
}

js實現

this.$router.push({
　　　　path: '/detail', 
　　　　query:{id: item.id}
　　 });

頁面中傳遞參數

<router-link :to="{ path:'/detail', query: {id: item.id} }"><button>顯示</button></router-link>

<router-link :to="`/detail?id=${item.id}`"><button>顯示</button></router-link>

獲取參數

this.$route.query.id

params與query對比

• params傳遞參數，url相對較爲隱蔽，沒有完全暴露；query傳遞參數，可以直觀的看到參數名、參數值；
• params傳遞參數，一定需要傳值，不傳值，則無法進入頁面；query不傳值，也可進入到頁面；
• 使用params時，路由改變，只需要修改router,具體業務中不需要關注；使用query時，路由調整，則需要檢查業務代碼中的；