vue3 router路由传参给组件示例代码

components/HelloWorld.vue

html 复制代码
<script setup>
import { ref } from 'vue'

import {useRoute} from 'vue-router'

const route = useRoute();

const query = route.query
// console.log(query)

</script>

<template>
	<router-link :to="{ 
		path: '/hello/person', 
		query: { id: 1, title: '跳转'} 
		}"><!--也可以采用param传参 -->
		跳转
		</router-link>
	<router-view/>
</template>
<style scoped>
a {
  color: #42b983;
}
</style>

routre/index.js

typescript 复制代码
import Person from '../components/Person.vue'

import HelloWorld from '../components/HelloWorld.vue'

import {createRouter,createWebHistory} from 'vue-router'

import VueTwo from '../components/Vue.vue'

const router = createRouter({
	history:createWebHistory(),
	routes:[
		{
			path:'/hello',
			component:HelloWorld,
			children:[
				{
					path:'/hello/person',
					component:Person
				}
			]
		},
		{	//第二种传参形式2
			path:'/vue2',
			component:VueTwo,
			// props: (route) => ({ id: 1, title: 2, content:3 })
			props(route){
				return ({ id: 1, title: 2, content:3 })
			}
		}
	]
})

export default router

components/person.vue

html 复制代码
<template>
	<div class="ttt">
		<h2>路由给到的数据:{{query}}</h2>
	</div>
</template>

<script setup lang="ts" name="testName">
	import { useRoute } from 'vue-router'
	
	const route = useRoute()
	console.log("person.vue页面获取参数:"+JSON.stringify(route.query))
</script>

<style>
	.ttt{
		color:red
	}
</style>

页面效果:

Vue.vue

html 复制代码
<template>
	<div>
		<h2>{{nameAll}}</h2>
		<h2>{{method}}</h2>
		<h2>{{tt()}}</h2>
		<h2>{{firstName}}</h2>
		<h2>更新后赋值数据:{{lastName}}</h2>
		<h2>赋值数据:{{writeValue}}</h2>
		<button @click="tt">vue2数据更新</button>
	</div>
</template>

<script lang ='ts' name='VueTwo'>
	export default{
		data(){
			return {
				firstName:"wu",
				lastName:"liuqi"
			}
		},
		props: ['id', 'title', 'content'],
		mounted(){
			console.log('ID:', this.id);
			console.log('Title:', this.title);
			console.log('Content:', this.content);
		},
		computed:{
			nameAll:function(){
				return this.firstName + this.lastName
			},
			method(){
				return 111
			},
			writeValue:{
				get(){
					return this.firstName + this.lastName
				},
				set(value){
					this.lastName = value
					return value
				}
			}
		},
		methods:{
			tt(){
				this.writeValue = "alilailail"
			}
		}
	}
</script>

<style>
</style>

页面效果:

相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器