小編這次要給大家分享的是vue路由跳轉怎么傳遞參數，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
日常業務中，路由跳轉的同時傳遞參數是比較常見的，傳參的方式有三種：
1）通過動態路由方式
//路由配置文件中 配置動態路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳轉時頁面
var id = 1;
this.$router.push('/detail/' + id)
//跳轉后頁面獲取參數
this.$route.params.id2）通過query屬性傳值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳轉時頁面
this.$router.push({
path: '/detail',
query: {
name: '張三'，
id: 1,
}
})
//跳轉后頁面獲取參數對象
this.$route.query 3）通過params屬性傳值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳轉時頁面
this.$router.push({
name: 'Detail',
params: {
name: '張三'，
id: 1,
}
})
//跳轉后頁面獲取參數對象
this.$route.params 總結：
1.動態路由和query屬性傳值 頁面刷新參數不會丟失， params會丟失
2.動態路由一般用來傳一個參數時居多(如詳情頁的id), query、params可以傳遞一個也可以傳遞多個參數 。
補充方法：
頁面刷新數據不會丟失
methods：{
insurance(id) {
//直接調用$router.push 實現攜帶參數的跳轉
this.$router.push({
path: `/particulars/${id}`,
})
}需要對應路由配置如下：
this.$route.params.id
看完這篇關于vue路由跳轉怎么傳遞參數的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
