vue传参包括2中方式，一种通过路径，一种通过params，如果用params的情况下，传值

this.$router.push(
          {
            name: 'TrainSketch',
            params: {
              modelId: row.modelId,
              outlineName: row.outlineName,
              outlineText: row.outlineText,
              troops: row.troops,
              arm: row.arm,
              staffingTime: row.staffingTime,
              useYear: row.useYear,
              version: row.version,
              id: row.id
            }
          })
          取值的话用this.$router.params;

Vue 路由传递参数 有两种方式：

一、用name传递参数

两步完成用name传值并显示在模板里：


	
在路由文件src/router/index.js里配置name属性。

	

				

 

				
1

				
2

				
3

				
4

				
5

				
6

				
7
				
				

				

 

				
routes: [

				
{

				
path: '/',

				
name: 'Hello',

				
component: Hello

				
}

				
]
				
			
	

	
模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：

	

				

 

				
1
				
				

				

 

				
<p>{{ $route.name}}</p>
				
			
二、通过 标签中的to传参

上边的传参或许很不正规，也不方便，其实工作中多数传参是不用name进行传参的，我们用标签中的to属性进行传参，需要注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：


			

 

			
1
			
			

			

 

			
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
			
		
 

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

name：就是我们在路由配置文件中起的name值。
	
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
了解基本的语法后，我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。


			

 

			
1
			
			

			

 

			
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
			
		
 

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.


			

 

			
1
			
			

			

 

			
{path:'/hi1',name:'hi1',component:Hi1},
			
		
 

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.


			

 

			
1
			
			

			

 

			
{{$route.params.username}}
			
		
 

vue-router 利用url传递参数 :冒号的形式传递参数

在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。

1.在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。


			

 

			
1

			
2

			
3

			
4
			
			

			

 

			
{

			
path:'/params/:newsId/:newsTitle',

			
component:Params

			
}
			
		
 

我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
2.在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。


			

 

			
1

			
2

			
3

			
4

			
5

			
6

			
7

			
8

			
9

			
10

			
11

			
12

			
13

			
14

			
15

			
16

			
17

			
18
			
			

			

 

			
<template>

			
<div>

			
<h2>{{ msg }}</h2>

			
<p>新闻ID：{{ $route.params.newsId}}</p>

			
<p>新闻标题：{{ $route.params.newsTitle}}</p>

			
</div>

			
</template>

			
<script>

			
export default {

			
name: 'params',

			
data () {

			
return {

			
msg: 'params page'

			
}

			
}

			
}

			
</script>
			
		
 

3.在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。


			

 

			
1
			
			

			

 

			
<router-link to="/params/198/jspang website is very good">params</router-link>
			
		
 

正则表达式在URL传值中的应用
上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。

加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。


			

 

			
1
			
			

			

 

			
path:'/params/:newsId(\\d+)/:newsTitle',
			
		

vue传值 与 vue传参是两块东西



概念图





原理

vue传参的原理主要在于 Vue.$route.params (也有$route.query)

$route是Vue的属性.params是$route的属性,用来储存数据的键值对.就是说它对象,储存很多属性(键值对,属性,属性值)在里面.



清单:

通过浏览器插件vue devtools(vue 开发者工具插件)可以看的到$route属性内部的具体数据: 



$route.params,可以说于$route是一个中间容器,用来容纳参数,是键值对的方式,这样在这个页面执行动作传递参数到$route.params,在另外一个页面就能从$route.params里拿参数,就这么回事

在路由里定义



//router >> index.js
{
        path: '/Page9/:abc/:cde',
        name: 'Page9',
        component: Page9
    }

意思就是我要往 Vue.$route.params里储存属性”abc”和”cde”,它们是作为属性名,键名key,

而属性值则由点击路由后触发路径的变化来决定具体的值.要传输什么就写什么,比如



//App.vue
<router-link to="/Page9/gigi/lkjdk7338">
          点击就跳转到page9,并同时传参到Vue.$route.params
</router-link>



//Page9.vue
<template>
    <div class="page1">
        <h1>{{ msg }}</h1>
        <p>{{this.$route.params}}</p>
        <h3 @click="nsj">拿数据</h3>
    </div>
</template>

<script>
    export default{
        name:'Page9',
        data(){
            return{
                msg:'I am Page9.vue'
            }
        },
        methods:{
            nsj(){
                this.msg = this.$route.params.asd
            }
        }

    }
</script>

意思是最后Vue.$route.params会储存{“abc” : “gigi” ,”cde” : “lkjdk7338”} 



或者用编程路由的写法,在脚本js里写要传的参: 

html:



<p><button @click="sj1">点击就跳转到page9,并同时传参到</button></p>

js:



sj1() {
                this.$router.push({
                    path: '/Page9',
                    name: 'Page9',
                    params: {
                        abc: this.mydata,
                        cde: 'dlj'
                    }
                })

意思是是最后Vue.$route.params会储存{“abc” : this.mydata这个数据 ,”cde” :  ”dlj”}

如何拿值: 

这就很简单了: 

直接从Vue.$route.params里拿就行了  
{{$route.params.abc }} –> “gigi” 或者 this.mydata具体的值

{{ $route.params.abc }} –> ” lkjdk7338 “

感觉Vue中父子传参的方式，实在是太多了，于是做一个小总结，只是总结我所知道的。
欢迎吐槽。。我的博客​storm4542.github.io
1.父传子
基本就用一个方式，props
父亲通过在 标签 中写入需要传入的数据。
我是爸爸，下面是儿子
儿子在 实例中的 props 选项中获取
//son.vueexport default {
name:'son',
props:{
selected:{
type:Boolean
},
title:{
type:String
}
}
}
2.子传父
# update:my-prop-name 模式
Vue 是单项数据流，所以不允许 儿子 直接修改父亲的数据，也不允许儿子直接修改自己的props。
假设一个情况，点击儿子，儿子需要改变 selected 的状态。
儿子方面
触发点击事件后， 让儿子触发一个 update 事件，把新的 selected 传出去
title:{{title}} selected:{{selected}}
export default {
name: "son",
props: {
selected: {
type: Boolean
},
title: {
type: String
}
},
methods: {
onClick() {
this.$emit("update:selected", !this.selected); //关键点
}
}
};
.son {
border: 1px solid red;
}
父亲方面
在标签中监听 update事件，并将传过来的 $event付给 selected，这样就完成了一次传参。
我是爸爸，下面是儿子
import Son from "./son";
export default {
name: "father",
components: {
Son
},
data() {
return {
selected: true
};
}
};
简单方式
.sync 修饰符
我是爸爸，下面是儿子
#  $parents API
儿子方面
从 this.$parent中可以获取到 父组件 的 data 数据 ，直接进行修改，是不是很刺激。
methods: {
onClick() {
this.$parent.selected = !this.$parent.selected;
}
}
虽然刺激，但是，我建议调用父组件的函数，来切换状态。
父亲方面
//father.vueexport default {
name: "father",
components: {
Son
},
data() {
return {
selected: true
};
},
methods: {
changeSelected() {
this.selected = !this.selected;
}
}
};
儿子方面
//son.vuemethods: {
onClick() {
this.$parent.changeSelected();
}
}
# EventBus
如果只是一个父亲，一个儿子上面的方法非常的简单实用，但是如果是祖孙三代传参呢？上面的方法就很麻烦了。
具体怎么麻烦，可以看一下我的这篇文章，用原始的方法造 tabs轮子 :Storm4542：使用Vue做一个tabs轮子​zhuanlan.zhihu.com
废话不多说，开始用 EventBus做一个简单的 tabs组件。
#app.vue
新闻
汽车
代码
新闻列表
汽车列表
代码列表
import Tab from "./components/tabs.vue";
import TabItem from "./components/tab-item";
import TabPane from "./components/tab-pane";
export default {
name: "app",
components: {
Tab,
TabItem,
TabPane
}
};
# tabs.vue
import TabItem from "./tab-item.vue";
import Vue from "vue";  //引入VUE
export default {
name: "tab",
props: {
selected: {
type: [Number, String]
}
},
data() {
return {
eventBus: new Vue() // 创建 eventBus
};
},
provide() {
return {
eventBus: this.eventBus // 提供 eventBus
};
},
mounted() {
this.eventBus.$emit("update:selected", this.selected);
//发布消息，告诉大家，现在的selected是啥
}
};
# tabs-item.vue
export default {
name: "tab-item",
props: {
name: {
type: [String, Number]
}
},
inject: ["eventBus"], //注入 eventBus
data() {
return {
active: false
};
},
created() {
this.eventBus.$on("update:selected", newSelected => {
this.active = this.name === newSelected;
}); //接收消息，如果newselected 和我的 name 相同，那么我就被选中了
},
methods: {
onClick() {
this.eventBus.$emit("update:selected", this.name);
//发布消息，如果点击了我，我就告诉大家，我被选中了
}
}
};
.active {
color: red;
}
# tab-pane.vue
export default {
name: "tab-pane",
props: {
name: {
type: [String, Number]
}
},
data() {
return {
active: false
};
},
inject: ["eventBus"],//注入 eventBus
created() {
this.eventBus.$on("update:selected", newSelected => {
this.active = this.name === newSelected;
});
//接收消息，如果newselected 和我的 name 相同，那么我就被选中了
}
};
.pane {
color: red;
}
# 灵活运用 provide inject
//father.vueexport default {
name:'father',
data(){
return {
someThing:'father'
}
},
provide(){
return {
father:this
}
}
}
//son.vueexport default {
name:'son',
inject:['father'],
methods:{
onClick(){
this.father.someThing = 'son'
}
}
}