上一篇写道路由跳转
这里写一写路由跳转的时候是如何进行路由传参的
首页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>
