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