vue實現頁面跳轉和參數傳遞的兩種方式

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

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

一、路由方式

頁面跳轉

當前組件使用$.router.push，通過參數name對應路由中目標組件的name實現跳轉

參數傳遞

傳值：當前組件使用$.router.push，通過參數query對應路由里目標組件props中的route.query接
參：目標組件script中使用$.router.query接收參數，頁面中直接寫參數名

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

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">點擊跳轉詳情</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>傳遞參數：{{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>

二、組件方式

只需配置一個路由即可實現不同頁面跳轉，頁面跳轉和參數傳遞通過組件間調用實現

頁面跳轉

父組件 → 子組件

- 引用子組件，利用v-if標簽分別選擇顯示對應組件

子組件 → 父組件
- 子組件使用$.emit(事件)調用父組件方法改變自定義參數（show）實現跳轉

參數傳遞

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

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">點擊跳轉詳情</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>傳遞參數：{{myId}}</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "MyDetail",
		props:['myId'],
		data() {
			return {
			};
		},
		methods:{
			toList(){
				this.$emit("toList")
			}
		}
	}
</script>

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

您可能感興趣的文章: