组件路由传参【vue3】

大家对于vue3也已经不太陌生了，但是在路由传参中会遇到一点小问题，不知大家是否也遇到过，一起来看一下

        首先是我们熟悉的vue路由传参 ，无非就是个router来进行的操作，首先就是导入vue-router

这里一定要导入4版本的，不然vue3运行不了

vue-router@4

准备完毕后，我们就得传参了

import { useRouter } from "vue-router";
const router = useRouter();
function test() {
  router.push({
    path:"/test",
    query:{
      id:"123"
    }
  });
}

这是大家在熟悉不过的一个query传参数，那边接收方用query接收就可以了。

import {useRoute} from 'vue-router'
const router = useRoute();
console.log('id：'+router.query.id);

别看简单的三条代码，这里是最容易写错的，大家一定要注意userRouter是发送端，而userRoute是接收端，因为这两个单词可以说接近一模一样，所以很容易写错，我就因为这个找了一下午的错误，希望大家注意