Vue路由传参和接收参数
1.传参
// 1.字符串的形式跳转到 about页面
//this.$router.push("/about")
// 2.对象形式
//this.$router.push({ path: "/about" });
//3.命名路由的形式
// this.$router.push({ name: "About" });
//4.替代的方式 是对当前页面的替换
//this.$router.replace("/about");
//5.携带查询参数 获取用this.$route.query.name
//this.$router.push({ name: "About", query: { name: "张三" } });
//this.$router.push({ path: "/about", query: { name: "张三" } });
//6.携带params
/*
下面这个是有效的
可以采用占位符的形式 path: '/about/:name',
可以不采用占位符的形式 path: '/about',
都是可以正常地获取到数据的
*/
this.$router.push({ name: "About", params: { name: "张三" } });
//下面这个是无效的
// this.$router.push({ path: "/about", params: { name: "张三" } });
2.接收参数
console.log(this.$route);
console.log(this.$route.name);
console.log(this.$route.fullPath);
console.log(this.$route.path);
console.log(this.$route.meta);
console.log(this.$route.query);
console.log(this.$route.params);
console.log(this.$router); //路由对象
console.log(this.$router.options.routes); //所有的路由
console.log(this.$router.mode);//路由模式