$router 是全局对象,VueRouter的一个实例对象,包含所有路由,包含了许多关键的对象和属性。例如:history,currentRoute,mode等。
$route 是路由对象,单个路由,可以获取对应的fullPath,name,path,params,query等。
两种传参方法:query 和 params (动态路由匹配)
1、用query传参: path + query
列表组件:
<router-link :to="{ path: '/detail', query: {id: item.id} }">(注:用query传参这里是带查询参数,用path)
</router-link>
export default new Router({
routes: [
{
path: '/detail',
name: 'Detail',
component: msgDetail
}
]
详情页接收参数:
this.$route.query.id //注:这里是$route(当前路由),而不是$router
2、用params传参: name + params
列表组件:
<router-link :to="{ name: 'Detail', params: {id: item.id} }">(注:用params传参这里是命名路由,用name)</router-link>
路由配置如下:
export default new Router({
routes: [
{
path: '/detail/:id', // 动态路径参数 以冒号开头
name: 'Detail',
component: msgDetail
}
]
详情页接收参数:
this.$route.params.id //注:这里是$route(当前路由),而不是$router