Vue的URL转跳与参数传递方法是什么

Vue URL转跳与参数传递

写业务中，从一个页面跳转到另一个页面，经常需要传值和取值，如何实现？

1.通过router-link进行跳转

使用query传递参数，路由必须使用path引入

<-- 在a页面进行传值 -->
    

　　跳转

跳转地址 => /home?key=hello&value=world

在b页面取值： this.$route.query.key

使用params传递参数，路由必须使用name引入

<-- 在a页面进行传值 -->
    

　　跳转
　　

跳转地址 ==> /home

在b页面取值：this.$route.params.key

2.$router方式跳转

通过query

this.$router.push({
　　path: '/detail',
　　query: {
　　　　name: 'admin',
　　　　code: 10021
　　}
});

跳转地址 => /detail?name=admin&code=10021

取值：this.$route.query.name

3.跳转外部链接

如果是vue页面中的内部跳转，可以用this.$router.push()实现，但是如果用这种方法跳到外部链接，就会报错，原因是直接把外部链接加在了http://localhost:8080/#/的后面，这就导致跳转出现问题。

那么如何跳转到外部链接呢，其实只需用 window.location.href = ‘url’就能实现。

具体代码如下：html 点击转跳

上面是触发一个点击事件，其中url是传给see的url链接，下面是事件执行的函数

js See(e) { window.location.href = e }

Vue参数传递的几种方法

开发过程中参数传递

1. 通过name传递参数



图一



图二

我们常把页面的路由配置在图一中的 router 文件夹下的 js 文件中，图二为配置的内容。这其中的 name 属性是可以作为参数传递的，在模版中直接只用 {{$route.name}} 接收，即可以在模版中显示。

2. 通过中的to传递参数

使用 < router-link to=" /page "> page < /router-link > 可以实现页面的跳转，这里面 to 是可以带上参数跳转的，我们需要在给 to 进行绑定，即 : to (v-bind:to)

page

• 这其中需要注意的是要给 to 加上绑定，后面跟的是对象形式的字符串。

• 其中的 name 是我们在路由配置文件（上图图二）中配置的 name 两者要对应。

• params 即是我们要传的参数，它可以是多个值。

随后在对应的模版页面中（这里为 page.vue）进行接收。

{{$route.params.data}}

3. 在业务逻辑中实现页面跳转并传参

当在业务逻辑中需要实现页面跳转经常能够使用到编程式导航：

• this.$router.go(1)，进入下一级

• this.$router.back(-1)，返回上一级，通俗的说就是前进与后退。

• this.$router.push(’/page’)，跳转到 page.vue

那么我们应该如何传递参数呢？例如，我们在判断完某个条件后需要跳转到 page 页并且需要传递 age 和 address 两个参数过去，我们的操作方法是：

App.vue

page