一、动态路径参数 以冒号开头（这种传参的方式会将传的值暴露在地址栏中；$route.params进行接收）

当to后面跟的是其他拼凑出来的值需要让to变为属性的方式传参  即    :to =' '

效果：

有时需要传递一个id获取对应的信息，为了兼容同一个页面的路由的参数，可传可不传，可以针对路由做以下处理: 

参数后面使用 ？

id 后面加个 ‘ ? ’ ，将 id 设置为可选参数

{
    path: '/index/:id?', //获取参数：this.$route.params.id
    name: 'index',
    component: Index
}

二、查询参数：get的方式进行传参（这种传参的方式相当于在地址栏？参数=值；$route.query进行接收）

 效果：

三、编程式导航传参

你也可以在编程式导航时传递参数，例如使用router.push或router.replace 

// 字符串路径
router.push({ path: 'user/123' }) // 对于动态路径参数，你需要确保路径的正确性
// 或者使用命名路由和params
router.push({ name: 'user', params: { userId: '123' }}) // 对于命名路由，params是必须的，而且是对象形式
 
// 查询参数
router.push({ path: 'user', query: { id: '123' }}) // 对于查询参数，使用query选项

四、使用<router-link>传递查询参数或动态路由参数

当使用<router-link>组件时，你也可以传递查询参数和动态路由参数

<!-- 使用查询参数 -->
<router-link :to="{ path: 'user', query: { id: 123 }}">Go to User</router-link>
<!-- 使用动态路由参数 -->
<router-link :to="{ name: 'user', params: { id: 123 }}">Go to User</router-link>

params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name 。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点：query刷新不会丢失query里面的数据；params刷新 会 丢失 params里面的数据。

使用场景：详情页（文章、商品）

若有不足请多多指教！希望给您带来帮助！