vue页面跳转和参数传递

lS_A 2023-12-27 原文

目标：两种方式，实现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 gt lt span vue.js

有关vue页面跳转和参数传递的更多相关文章

ruby-on-rails - 如何在 ruby 中使用两个参数异步运行 exe？ - 2
exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby中使用两个参数异步运行exe吗？我已经尝试过ruby命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何rubygems会支持我的问题？最佳答案您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除
ruby - RSpec - 使用测试替身作为 block 参数 - 2
我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby - 检查方法参数的类型 - 2
我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？最佳答案使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)
ruby-on-rails - 在默认方法参数中使用 .reverse_merge 或 .merge - 2
两者都可以defsetup(options={})options.reverse_merge:size=>25,:velocity=>10end和defsetup(options={}){:size=>25,:velocity=>10}.merge(options)end在方法的参数中分配默认值。问题是:哪个更好？您更愿意使用哪一个？在性能、代码可读性或其他方面有什么不同吗？编辑:我无意中添加了bang(!)...并不是要询问nobang方法与bang方法之间的区别最佳答案我倾向于使用reverse_merge方法:option
ruby - 定义方法参数的条件 - 2
我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano
ruby - rails 3 redirect_to 将参数传递给命名路由 - 2
我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use
ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2
对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一
ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2
我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些
ruby - 在 Ruby 中按名称传递函数 - 2
如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只

vue页面跳转和参数传递

一、路由方式

1. 路由

2. 列表页面

3. 详情页面

二、组件方式

1. 路由

2. 主页组件

3. 列表子组件

4. 详情子组件

有关vue页面跳转和参数传递的更多相关文章

随机推荐