注意❗
经查阅资料，发现了原因。 由于用params传参，页面刷新之后params参数就会丢失，所以Vue router 4.0以上版本，已经将params传参方法移除。
在项目中,通过一个列表进入详情页，携带参数id渲染不同的详情页，动态传参使用编程式跳转。
路径传参
在router路由配置中
{
path: '/article/:id',
name: 'Article',
component: Article,
}在列表页中点击事件
handleClick(id){
this.$router.push(`/article/${id}`) ;
}在详情页中使用params获取
mounted() {
console.log(this.$route.params.id);
}特点:方法一中需要在path中添加/:id来对应 $router.push 中path携带的参数。会把详情id暴漏在网址中。
params 传参（4.0 已移除）
在router路由配置中
{
path: '/article',
name: 'Article',
component: Article,
}在列表页中点击事件
handleClick(id){
this.$router.push({
name: 'Article',
params: {
id: id
}
})
}在详情页中使用params获取
mounted() {
console.log(this.$route.params.id);
}特点：这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。所以不会暴漏在网址中，同时也不会变化网址，router.afterEach也没有办法调用。
query 传参（推荐）
在router路由配置中
{
path: '/article',
name: 'Article',
component: Article,
}在列表页中点击事件
handleClick(id){
this.$router.push({
path: '/article',
query: {
id: id
}
})
}在详情页中使用query获取
mounted() {
console.log(this.$route.query.id);
}特点：这种情况下 query传递的参数会在url后面拼接上 ?id=？，同样会暴漏详情id
query传参和params传参的区别
query传参配置的是path，而params传参配置的是name，且在params中配置path无效query传递的参数会显示在地址栏中，而params传参不会query传参刷新页面数据不会消失，而params传参刷新页面数据回消失params可以使用动态传参，动态传参的数据会显示在地址栏中，且刷新页面不会消失，因此可以使用动态params传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失