vue router-link 跳转路由传值

传值原理

当你点击进入某个页面的链接的时候，给地址栏传一个参数
然后当你进入到对应的网页以后，再从地址栏获取对应的信息

实现过程

---

前提声明：

1. 我的这个链接再 App.vue 里面，这个 App.vue 里面的内容是渲染到index.html 里面的，所以就能在主页面看到对用的信息
2. to 是到那个路由给的地址对应的链接
3. 接受参数的代码是写在 我的要进入的那个页面里面的

---

• 有对应的页面
• 路由已经写好
• 下面代码就是传参和接受参数的代码的过程

/**************************App.vue******************/

<router-link to="/one?a=1&b=2&c=3>One</rooter-link>

/**************************One.vue******************/

export default {
	name:"One",
	mounted(){     //mounted 是当你的页面挂载完以后执行
		console.log(this.$route)  // !!! $route 没有 r、
								  //this.$route这个就是用来接受参数的
	}
}

结果展示：

• 可以看到在 query 里面有你传递的参数
• 既然能够看到值了，那我们就可以这样写：

export default {
	name:"One",
	mounted(){     //mounted 是当你的页面挂载完以后执行
		console.log(this.$route.query)  // 这样就能获取到对应的数据了
	}
}

• 只要你知道它在你实例下面这个 $route里面的query 里面，那你获取数据就可以这样

/***************One.vue*******************/
<template>
	<div>{{this.$route.query.a}}</div>
</template>

传递参数的几种写法 *

/***************第一种*******************/

<router-link to="/one?a=1&b=2&c=3">One</router-link>

---------优点：刷新数据不会丢失
---------缺点：传递对象时，刷新会变成对象的原始值

/***************第二种*******************/

<router-link :to="{name:'One',query:{a:4,b:5,c:6}}">One</router-link>

/***************第三种*******************/

<router-link :to="{path:'/one',query:{a:7,b:8,c:{age:12}}}">One</router-link>

/***************第四种*******************/
//传
<router-link :to="{name:'Two',params:{id:1,type:2}}">Two</router-link>
                  //params只能与name结合使用

//收
this.$route.params.id
this.$route.params.type

---------优点：可以直接传对象
---------缺点: 刷新数据丢失。