ps:本人菜鸟一枚，因为记性不好又丢三落四，经常找不到自己做的笔记放哪了，所以打算存在掘金，第一次写文章，技术也不咋地，写的不对的地方请各位兄弟姐妹们批评指正，爱你们！！！

一.方式一：path携带参数

路由定义：

{
  path: "/product-list/:id",
  component: ProductList,
  name:"product-list"
}

代码实现

import { useRouter } from 'vue-router';
export default {
  name: "home",
  setup() {
    const router=useRouter();
    const toGoodDetail=({goodsId})=>{
      router.push({path: `/product/${goodsId}`})
    }
    return {};
  },
};

参数在地址栏中显示如下：（其中10925时页面跳转时路由携带的id参数）

http://localhost:8080/#/product/10925

获取参数的方式：

const route=useRoute();
console.log(route.params)

二. 方式二：通过query携带

路由定义：

{
  path: "/product-list",
  component: ProductList,
  name:"product-list"
}

代码实现

import { useRouter } from 'vue-router';
export default {
  name: "home",
  setup() {
    const router=useRouter();
    const onJumpDetail=(id)=>{
      router.push({
        path:"/product-list",
        query:{
          categoryId:id
        }
      })
    }
    return {};
  },
};

参数在地址栏中显示如下：（query携带的参数可以在地址栏中显示，并用？和&拼接在路径后面

http://localhost:8080/#/product-list?categoryId=17

获取参数的方式：

const route=useRoute();
console.log(route.query)

三. 方式三：通过params携带

路由定义：

{
  path: "/product-list",
  component: ProductList,
  name:"product-list"
}

代码实现

import { useRouter } from 'vue-router';
export default {
  name: "home",
  setup() {
    const router=useRouter();
    const onJumpDetail=(id)=>{
      router.push({
        path:"/product-list",
        params:{
          categoryId:id
        }
      })
    }
    return {};
  },
};

参数在地址栏不可见

http://localhost:8080/#/product-list

获取参数的方式：

const route=useRoute();
console.log(route.params)

四.通过router-link

<router-link :to="{name:'home', params: {id:1}}">  
 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失,相当于params传参
// 配置path,刷新页面id会保留，相当于path携带参数

<router-link :to="{name:'home', query: {id:1}}"> 
 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置