vue3.x版本路由router跳转+传参

显示传参模式 get

import { useRouter } from 'vue-router';
  const router = useRouter();
  let skipEdit = (key: string, res: any) => { // 个人需求函数自行省略
    router.push({
      path: 'editRole',
      query: {
        key: key,
        body: res,
      },
    });
  };
// 接收
import { useRoute } from 'vue-router';
  setup() {
  
    const route = useRoute(); // 1 
    
    let res: any = ref({});
    let get = async () => {
      res.value = await getParticulars({ categoryName: route.query.name // 2 });
    };
    onMounted(get);
    return {
      columns,
      get,
      res,
    };
  },

隐式传参模式 post

import { useRouter } from 'vue-router';
  const router = useRouter();
  let skipEdit = (key: string, res: any) => {  // 个人需求函数自行省略
    router.push({
      name: 'EditRole',
      params: {
        key: key,
       body:JSON.stringify(res),
      },
    });
  };
// 接收
  setup() {
    const route: any = useRoute();
    if (route.params.body) {
      let obj = JSON.parse(route.params.body);
      console.log(JSON.parse(obj));
    }
    return {
      date,
    };
  },
posted @ 2021-10-15 14:39  啊-苏  阅读(620)  评论(0编辑  收藏  举报