路由之间的跳转方式有哪些声明式_vue路由跳转的方式（一）

一、明文传参(参数在query中，json格式传递)----常用

方法一：html跳转

编辑详情

方法二：js跳转

this.$router.push({

name:'Details',

query:{

id:scope.row.id,

title:scope.row.title

}

})

接收参数 this.$route.query.xxx

let id = this.$route.query.id;

let title = this.$route.query.title;

优势：页面刷新，参数不会丢失

劣势：参数暴露了

二、密文传参(类似明文传输，仅仅是query替换成params，其他完全一样)--不常用，因为刷新时参数丢失

编辑详情

接收参数 this.$route.params.xxx

优势：参数暴露了

劣势：页面刷新，参数丢失

三、路由配置里，用冒号的形式传参

{

path: "/details/:id/:title",

name: "Details",

hidden: true, //默认隐藏，点击编辑详情-显示

meta: {

name: "信息详情",

},

component: () => import("../views/Info/Details.vue"),

}

传参方式

:to="{path:`/details/${scope.row.id}`}"

this.$router.push({

path:`/details/${scope.row.id}`

})

接收方式

$route.params.id