vue實現(xiàn)頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式

更新時間：2023年09月06日 11:17:32 作者：(lS)

這篇文章主要介紹了vue頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、路由方式

頁面跳轉(zhuǎn)

當(dāng)前組件使用$.router.push，通過參數(shù)name對應(yīng)路由中目標(biāo)組件的name實現(xiàn)跳轉(zhuǎn)

參數(shù)傳遞

傳值：當(dāng)前組件使用$.router.push，通過參數(shù)query對應(yīng)路由里目標(biāo)組件props中的route.query接
參：目標(biāo)組件script中使用$.router.query接收參數(shù)，頁面中直接寫參數(shù)名

（方法不唯一，還有其他方式）

1. 路由

const router = new Router({
	routes: [{
		path: '/list',
		name: 'List',
		component: () => import('@/components/demo2/List.vue')
	},{
		path: '/detail',
		name: 'Detail',
		component: () => import('@/components/demo2/Detail.vue'),
		props: route => ({param: route.query.param})
	}]
})

2. 列表頁面

<template>
	<div>
		<h1>列表頁面</h1>
		<div>
			<el-button type="primary" @click="toDetail">點擊跳轉(zhuǎn)詳情</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: "List",
		data() {
			return {
				myId: "123"
			};
		},
		methods: {
			toDetail() {
				this.$router.push({
					name: 'Detail',
					query: {param: this.myId}
				})
			}
		}
	}
</script>

3. 詳情頁面

<template>
	<div>
		<h1>詳情頁面</h1>
		<div>
			<el-button type="primary" @click="toList">點擊返回列表</el-button>
			<div>傳遞參數(shù)：{{myId}}</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Detail",
		data() {
			return {
				myId : this.$route.query.param
			};
		},
		methods:{
			toList(){
				this.$router.push({
					name: 'List',
				})
			}
		}
	}
</script>

二、組件方式

只需配置一個路由即可實現(xiàn)不同頁面跳轉(zhuǎn)，頁面跳轉(zhuǎn)和參數(shù)傳遞通過組件間調(diào)用實現(xiàn)

頁面跳轉(zhuǎn)

父組件 → 子組件

- 引用子組件，利用v-if標(biāo)簽分別選擇顯示對應(yīng)組件

子組件 → 父組件
- 子組件使用$.emit(事件)調(diào)用父組件方法改變自定義參數(shù)（show）實現(xiàn)跳轉(zhuǎn)

參數(shù)傳遞

父組件 → 子組件
- 傳值：父組件引用子組件標(biāo)簽（<my-detail :id="父組件參數(shù)"></my-detail>）中傳遞參數(shù)
- 接參：子組件接收參數(shù)使用props:['id']
子組件 → 父組件
- 傳值：子組件使用$.emit(父組件方法,參數(shù))傳遞參數(shù)
- 接參：父組件通過方法名(參數(shù))接收

1. 路由

const router = new Router({
	routes: [{
		path: '/main',
		name: 'Main',
		component: () => import('@/components/demo1/Main.vue')
	}]
})

2. 主頁組件

<template>
	<div>
		<h1>主頁面</h1>
		<my-list v-if="show == 'list'" @toDetail="toDetail"></my-list>
		<my-detail v-if="show == 'detail'" @toList="toList" :myId="myId"></my-detail>
	</div>
</template>
<script>
	import MyList from "@/components/demo1/MyList"
	import MyDetail from "@/components/demo1/MyDetail"
	export default {
		name: "Main",
		components: {
			MyList,
			MyDetail
		},
		data() {
			return {
				show: "list",
				myId: ""
			};
		},
		methods:{
			toDetail(data){
				this.show = "detail"
				this.myId = data
			},
			toList(){
				this.show = "list"
			}
		}
	}
</script>

3. 列表子組件

<template>
	<div>
		<h2>列表頁面</h2>
		<div>
			<el-button type="primary" @click="toDetail">點擊跳轉(zhuǎn)詳情</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: "MyList",
		data() {
			return {
				myId: "123"
			};
		},
		methods: {
			toDetail(data) {
				this.$emit("toDetail",this.myId)
			}
		}
	}
</script>

4. 詳情子組件

<template>
	<div>
		<h2>詳情頁面</h2>
		<div>
			<el-button type="primary" @click="toList">點擊返回列表</el-button>
			<div>傳遞參數(shù)：{{myId}}</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "MyDetail",
		props:['myId'],
		data() {
			return {
			};
		},
		methods:{
			toList(){
				this.$emit("toList")
			}
		}
	}
</script>

到此這篇關(guān)于vue頁面跳轉(zhuǎn)和參數(shù)傳遞的文章就介紹到這了,更多相關(guān)vue頁面跳轉(zhuǎn)和參數(shù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: