vue-router路由传参的几种方式(干货)

一，通过path传参(参数在url里，刷新页面，参数不会丢失)

vue2

传参的方式:
this.$router.push({path:'index',query:{name:'李四'}})

获取参数方式
let params = this.$route.query

vue3

传参的方式:
import {useRouter} from "vue-router"
useRouter().push({path:'index',query:{name:'李四'}})

获取参数方式
import {useRoute} from "vue-router"
let params = useRoute().query

二，通过name传参(通过name传参，不能持久化，刷新页面，参数会丢失)

vue2

传参的方式:
this.$router.push({name:'Index',params:{name:'李四'}})

获取参数方式
let params = this.$route.params

vue3

传参的方式:
import {useRouter} from "vue-router"
useRouter().push({name:'Index',params:{name:'李四'}})

获取参数方式
import {useRoute} from "vue-router"
let params = useRoute().params

三，通过name动态传参(刷新页面，参数不会丢失)

路由配置项：

 {
      name: "List",
      path: "list/:id/:name",
      component: () => import("@/views/list.vue"),
      meta: {
        title: "列表",
      },
    },

携参跳转

this.$router.push({
    name: 'List',
    params: { id: 99,name: '李四'},
});

地址栏 http://localhost:81/#/index/list/99/李四

获取参数

let params = this.$route.params