在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
这里我们主要采用对象跳转形式。
要跳转页面的path属性值:router.push({ path: 'my-exchange' }),对应router数组对象中的path属性值:
要跳转页面的name属性值:router.push({ name: 'my-exchange-index' }),对应router数组对象中的name属性值:
给页面传参则在push函数传入的实参对象中的第二个属性传入 query 或 params对象即可,对象中写具体要传的参数(注:如果query 或 params对象中的属性传入的有引用类型的,则需要JSON.stringify(引用类型)转化一下)。
在对应的页面接收也只需要:this.$route.query 或 this.$route.params:
官方解释:
其中我个人建议对象的第一个属性用name来控制要跳转的页面,因为如果是path的话,params属性将会被忽略(也就是说传参要采用拼接字符串的方式,超不利于代码越多,看的还不舒服)。
同时对于第二个属性,我个人建议采用query来进行路由传参,因为 params 对象传参,只要页面一刷新你传入的参数就没了,query则保存在url地址中,你怎么刷新它都还在。
小总结一下:
使用params传参在浏览器的url地址栏中是不可见得,query则类似于get传参,是可见的。
params传参会丢失数据,query不会。
不过虽然params传参会丢失数据,但是它不会污染 url 路径,会显得 url 路径特别的整洁干净。
所以偶尔也会使用params传参。
当然啦,也有很多方法可以处理params传参会丢失数据问题,比如通过Cookies来存储数据即可。
在页面进入就执行的生命周期函数中看一下 this.$route.params 中有没有东西,如果有,则把它存到 Cookies 里面,如果页面刷新了,数据没了,则直接从Cookies 里面拿即可。