vue页面跳转并传参的常见方式分别是什么-群英

上一篇：vue使用中报错及bug问题怎样解决呢？下一篇：vue中push报错的问题如何解决呢？

这篇文章主要介绍了“vue页面跳转并传参的常见方式分别是什么”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue页面跳转并传参的常见方式分别是什么文章都会有所收获，下面我们一起来看看吧。

1、携带普通类型参数

字符串、数字等。

path：要跳转新页面的路由链接

query：要携带的参数

let pathInfo = this.$router.resolve({
  path:'/product_detail',
     query:{
         productId:'11'
     }
 })
 window.open(pathInfo.href, '_blank');

新页面的参数接收：

this.productId = this.$route.query.productId

2、携带复杂类型参数

对象、数组等，通过JSON转换进行传递。

let pathInfo = this.$router.resolve({
   path:'/product_detail',
     query:{
         data:{name:'张三'}
     }
 })
 window.open(pathInfo.href, '_blank');

新页面的参数接收：

console.log(this.$route.query.data)

vue页面跳转并传参的八种方式

我们知道，在vue中每个页面都需要在路由中声明，就是在router/index.js中写下面代码：

import Vue from 'vue'
import Router from 'vue-router'
import Test from "../components/Test";
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
          {
              path: '/t',
              name: 'Test',
              component: Test,
              hidden:true
            },
        ]
    })

实现页面跳转并传参有多种方式：

方法一

在template中可以使用<router-link>标签实现跳转，跳转的路径是http://localhost:8080/t?index=id，如下：

<router-link to="/t?index=1">
     <button class="btn btn-default">点击跳转</button>
</router-link>

只需要点击按钮就可以实现跳转，不需要写js代码，需要传递参数的话只需要/t?index=1即可，这样的话跳转的页面获取参数通过window.location.href能够获取到完整的url,然后截取参数。也可以通过下面代码获取参数

this.$route.query.index

方法二

跳转的路径是http://localhost:8080/t?index=id

<router-link :to="{path:'/t',query: {index: 1}}">
     <button class="btn btn-default">点击跳转</button>
</router-link>

其中需要注意，这里的to前面一定要加冒号，path的值要和上面路由定义的值一致，传参用query，里面是参数字典。

接收参数：

this.$route.query.index

方法三

命名路由的方式：

跳转的路径是http://localhost:8080/t?index=id

<router-link :to="{name:'Test',params: {index: 1}}">
     <button class="btn btn-default">点击跳转</button>
</router-link>

注意这里的name也要和router/index.js中声明的name值一致，并且传参使用params，和name配对的是params，和path配对的是query。

接收参数：

this.$route.params.index

方法四

跳转的路径是http://localhost:8080/t/id

<router-link:to="'/test/'+1">
     <button class="btn btn-default">点击跳转</button>
</router-link>

这时的路由也需要更为为下面的形式：

routes: [
          {
              path: '/t/:index',
              name: 'Test',
              component: Test,
              hidden:true
            },
        ]

接收参数：

this.$route.params.index

方法五

上面四种方法都是在html中实现的跳转，还有另外对应的在js中实现的跳转并传参的方法，代码如下：

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t?index=1'});
            }
        }
    }
</script>

接收参数依然使用

this.$route.query.index

方法六

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t',query:{ index:'1'}});
            }
        }
    }
</script>

接收参数依然使用

this.$route.query.index

方法七

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t/index'});
            }
        }
    }
</script>

接收参数依然使用

this.$route.query.index

方法八

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({name: 'Test',params:{ index:'1'}});
            }
        }
    }
</script>

接收参数依然使用