Vue頁面、組件之間傳參方式繁多，此處羅列出常用的幾種方式，歡迎審閱補充。

一丶路由傳參

這里的路由傳參以編程式 router.push(...) 為例，聲明式 <router-link :to="..."> 與之類似。此處模擬情景為從 componentsA.vue 頁面跳轉到 componentsB.vue 頁面傳參。首先，路由配置信息如下：

router.js

import Vue from 'vue'import Router from 'vue-router'import componentsA from './components/componentsA' //在components下創建componentsA.vueimport componentsB from './components/componentsB' //在components下創建componentsB.vueVue.use(Router)export default new Router({	routes:[		{			path:'/componentsA',			name:'componentsA',			component:componentsA		},		{			path:'/componentsB',			name:'componentsB',			component:componentsB		}	]})

1.1 路由配置傳參

首先確定自己要傳的參數名，將路由配置修改一下,傳name,age,sex三個參數：

{			path:'/componentsB/:name/:age/:sex',			name:'componentsB',			component:componentsB		}

在 componentsA.vue 頁面通過 this.$router.push 配置與之對應的參數：

componentsA.vue

<template>	<div>		<div>我是組件A</div>		<button @click='routerToB1'>方式一跳轉到組件B</button>	</div></template><script>	export default{		data(){			return{				person:{name:'Gene',age:'18',sex:'male'}			}		},		methods: {			routerToB1() {				this.$router.push({					path:`componentsB/${this.person.name}/${this.person.age}/${this.person.sex}`				})			}		},	}</script><style></style>

然后在 componentsB.vue 頁面用 this.$route.params 接收參數：

componentsB.vue

<template>	<div>		<div>我是組件B</div>	</div></template><script>	export default{		created(){			this.getRouterData()		},		methods: {			getRouterData(){				const param = this.$route.params				console.log(param)//{name:'Gene',age:'18',sex:'male'}			}		},	}</script><style></style>

點擊按鈕"方式一跳轉到組件B"，componentsB頁面打印出 {name:'Gene',age:'18',sex:'male'} ,成功獲取到A頁面傳過來的參數，并且地址欄顯示為 localhost:8889/#/componentsB/Gene/18/male （端口號根據自己設置的來），表明這種傳參方式url會攜帶參數。

1.2 params傳參

首先將剛才路由配置修改部分還原，在 componentsA.vue 頁面添加按鈕"方式二跳轉到組件B":

componentsA.vue

<template>	<div>		<div>我是組件A</div>		<button @click='routerToB1'>方式一跳轉到組件B</button>		<button @click='routerToB2'>方式二跳轉到組件B</button>	</div></template>