用Vue3.0打造Todo List：探索query参数与params传递方法的实践指南

最编程 2024-08-01 20:00:49

...

上一篇写道路由跳转这里写一写路由跳转的时候是如何进行路由传参的首页start的传参问题开始页引进ref 先定义几个参数，然后通过路由的形式把这几个参数传递到另一个路由

 let name = ref("jack");
    let num = ref(10);
    let obj = ref({
      msg: "start",
    });

这里可以看见我们最常用的push的方法 push函数里面可以直接传入跳转的路径

      router.push("/about");

也可以传入对象参数

 router.push({
        path: "/about",
      });

query模式传参

跳转路由这几个参数以query的方式传递过去从start.vue 跳转到home.vue 在浏览器地址栏可以看见传递过来的参数

Home.vue里面接收首先引入useRoute 这个函数

import { useRouter, useRoute } from "vue-router";

打印一下这个当前的路由对象

 //当前的路由对象
    let route = useRoute();
    console.log(route);

可以看到页面里面已经有了接收到的参数了

定义的数字类型通过jQuery传递过来都会变成字符串的类型使用typeof检测一下

//当前的路由对象
let route = useRoute();

//query传递过来的参数都是字符串类型
console.log("打印route", typeof route.query.num);

所以这里传递过来的参数需要使用 JSON.parse手动转一下 JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)。

params传参

 router.push({
        path: "/home",
        params: {
          name: name.value,
          num: num.value,
          obj: JSON.stringify(obj),
        },
      });

 //当前的路由对象
    let route = useRoute();

    //query传递过来的参数都是字符串类型
    console.log("打印route", route.params);

此时打印的为空对象、

这里需要注意一下 push里面还可以传入name name是路由名字 query传参path和name都可以 params传参只能用name

图片.png

params传入的参数不会在地址栏中显示，刷新之后就没有了

Start.vue

<template>
  <div>
    <button @click="start">开始任务</button>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

import { useRouter } from "vue-router";

export default defineComponent({
  name: "Start",

  setup() {
    //router是全局路由对象
    let router = useRouter();
    console.log(router);

    let name = ref("jack");
    let num = ref(10);
    let obj = ref({
      msg: "start",
    });

    let start = () => {
      //push 如果传递的是对象的形式 就可以传递参数

      router.push({
        // path: "/home",
        //push里面还可以传入name name是路由名字
        // query传参path和name都可以
        // params传参只能用name
        name: "Home",
        params: {
          name: name.value,
          num: num.value,
          obj: JSON.stringify(obj.value),
        },
      });
    };

    return {
      start,
    };
  },
});
</script>

<style scoped></style>

Home.vue

<template>
  <div>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer>
    <button @click="goto">跳转路由</button>
  </div>
</template>

<script>
// import NavHeader from "@/components/navHeader/NavHeader.vue";
// import NavMain from "@/components/navMain/NavMain.vue";
// import NavFooter from "@/components/navFooter/NavFooter.vue";
import { defineComponent, ref, computed } from "vue";

import { useStore } from "vuex";

import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    // NavHeader,
    // NavMain,
    // NavFooter,
  },
  setup() {
    //router是全局路由对象
    let router = useRouter();

    //当前的路由对象
    let route = useRoute();

    //query传递过来的参数都是字符串类型
    console.log("打印route", route.params);

    let goto = () => {
      //跳转路由
      //push函数里面可以直接传入跳转的路径
      //router.push("/about");

      //back回退到上一页
      //forward:去到下一页
      //go（整数） 整数代表前进  负数代表后退

      router.push({
        path: "/about",
      });
    };

    return {
      goto,
    };
  },
});
</script>

<style></style>

上一篇：在Vue中实现路由传递参数的两种方法

下一篇：在Vue中可能遇到的路由参数传递问题与注意事项