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>

页面效果:

相关推荐
我自纵横2023几秒前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li1 分钟前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
excel5 分钟前
webpack 核心编译器 十五 节
前端
excel9 分钟前
webpack 核心编译器 十六 节
前端
雪落满地香2 小时前
css:圆角边框渐变色
前端·css
慈云数据3 小时前
从开发到上线:基于 Linux 云服务器的前后端分离项目部署实践(Vue + Node.js)
linux·服务器·vue.js
风无雨4 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!4 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
记得早睡~8 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
安分小尧9 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架