vue路由跳转传递参数方式

一、直接在路由中写参数&＃xff08;刷新页面参数不会丢失&＃xff09;

//路由配置文件
//需要配置动态路由
{path: &＃39;/detail/:id&＃39;,name: &＃39;Detail&＃39;,component: Detail
}//跳转时页面
var id &＃61; 1;
this.$router.push({path: &＃96;/detail/${id}&＃96;,
})//跳转后页面 获取参数
this.$route.params.id


二、通过query属性传值&＃xff08;刷新页面参数不会丢失&＃xff09;

//路由配置文件
{path: &＃39;/detail&＃39;,name: &＃39;Detail&＃39;,component: Detail
}//跳转时页面
this.$router.push({path: &＃39;/detail&＃39;,query: {name: &＃39;张三&＃39;,id: 1,}
})//跳转后页面获取参数对象
this.$route.query


三、通过params属性传值&＃xff08;刷新页面参数会丢失&＃xff09;

//路由配置文件中
{path: &＃39;/detail&＃39;,name: &＃39;Detail&＃39;,component: Detail
}//跳转时页面
this.$router.push({name: &＃39;Detail&＃39;,params: {name: &＃39;张三&＃39;,id: 1,}
})//跳转后页面获取参数对象
this.$route.params