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