vue路由跳转的方式（一）

可参考 https://www.jb51.net/article/160401.htm

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

方法一：html跳转

<router-link :to="{name:'Details',query:{id:scope.row.id,title:scope.row.title}}" >
      <el-button type="success" size="small">编辑详情</el-button>
</router-link>

方法二：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，其他完全一样）--不常用，因为刷新时参数丢失

<router-link :to="{name:'Details',params:{id:scope.row.id,title:scope.row.title}}" >
      <el-button type="success" size="small">编辑详情</el-button>
</router-link>

接收参数 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