vue-router 路由传参

vue-router传递参数分为两大类：

编程式的导航 router.push
声明式的导航 <router-link>

声明式的导航 路由导航

字符串

<router-link to="/detail">详情</router-link>

此方式实现路由跳转，不携带参数。

对象

传递参数主要是以对象的形式，有 命名路由 和 查询参数。
对应路由配置如下：

{
   
  path: '/detail',
  name: 'Detail',
  component: () => import('./Detail.vue')
}

命名路由

<router-link :to="{ name: 'Detail', params: { id: 1111}}">click to detail page</router-link