$route和$router的区别 以及携带参数跳转

1.点击某卡片将id通过形参传递过来，如图，click后面加native的原因是element中的卡片中点击事件是失效的

$router是VueRouter的一个实例，它包含了所有路由，包括路由的跳转方法，钩子函数等，也包含了一些子对象
常用跳转为

//直接跳转
this.$router.push('/Detail')
//使用对象的形式 不带参数
this.$router.push({path:'/Detail'})
//使用对象形式，参数为地址栏上的参数
this.router.push({path:'/Detail',query:{id:'1'})
//使用对象形式，参数为params不会显示在地址栏
this.$router.push({name:'user',params:{id:123})

本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加history记录

$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部对象

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如‘home/news’
$route.params
对象，包含路由中的动态片段和全匹配片段的键值对
$route.query 包含路由中查询参数的键值对

$route.router
路由规则所属的路由器
$route.matched
数组，包含当前匹配路径中所包含的所有片段所对应的配置参数对象
$route.name
当前路径的名字，如果没有使用具名路径，则名字为空