作者热门文章
- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
例如:点击table表格第一列进入详情页,这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用
一般我们有两种方式让路由携带参数
1.路由传参query(path是路由地址,query是需要传递的参数)
goDetail() {
this.$router.push({
path: "/publish",
query: {
roleName: "admin",
id: 1,
},
});
},
注意:如果传入的参数存在对象,则必须转成JSON字符串传入,接收的时候再转换
goDetail() {
let arr = [{name:"admin",value:111},{name:"admin2",value:222}]
this.$router.push({
path: "/publish",
query: {
roleName: JSON.stringify(arr),
id: 1,
},
});
},
2.路由传参params(name与路由的name对应,params是需要传递的参数)
goDetail() {
this.$router.push({
name: "publish",
params: {
roleName: "admin",
id: 1,
},
});
},
注意:params传参会刷新页面的时候会丢失数据,解决方法是在路由的配置文件里给该路由后面拼接需要的参数
{
path: "/Publish/:roleName/:id",//:roleName与:id之间的/可以省略,看自己喜好
name: "publish",
component:import("../components/PublishApp"),
},
1.query的接收方式:
//参数不存在对象时
created() {
console.log(this.$route.query)
},
//参数存在对象时,只能单独取,直接打印query报错
created() {
console.log(JSON.parse(this.$route.query.roleName));
},
2.params的接收方式:
created() {
console.log(this.$route.params);
},
1.query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示;2.如果用params又不想刷新后丢失参数,只能拼在路由path后面;
3.个人觉得用params把参数拼在路由后面比query好看很多;``4.params想携带数组对象这些类型的数据,又不想刷新后丢失,我没找到解决办法,还是用query,有没有大神知道告诉我一下谢谢!!!
我有以下正则表达式 /[a-zA-Z0-9_-]/ 当字符串只包含从 a 到z 大小写、数字、_ 和 -。 我的代码有什么问题? 能否请您向我提供一个简短的解释和有关如何修复它的代码示例? //var
我是一名优秀的程序员,十分优秀!