脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → 跳转页打开新窗口携带与接收参数

vue跳转页面打开新窗口,并携带与接收参数方式

 更新时间：2022年04月09日 16:49:20   作者：一羊迁徙  
这篇文章主要介绍了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>

接收参数依然使用

this.$route.params.index

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:

相关文章

  • vue用addRoutes实现动态路由的示例

    vue用addRoutes实现动态路由的示例

    本篇文章主要介绍了vue用addRoutes实现动态路由的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue实现pdf在线预览功能的示例代码

    Vue实现pdf在线预览功能的示例代码

    这篇文章主要为大家详细介绍了如何使用Vue实现pdf在线预览功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • 解析Vue.js中的组件

    解析Vue.js中的组件

    组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章主要介绍了vue.js 中的组件，需要的朋友参考下
    2018-02-02
  • nuxt中刷新页面后防止store值丢失问题

    nuxt中刷新页面后防止store值丢失问题

    这篇文章主要介绍了nuxt中刷新页面后防止store值丢失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue选项卡切换登录方式小案例

    vue选项卡切换登录方式小案例

    这篇文章主要为大家详细介绍了vue选项卡切换登录方式小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • el-dialog关闭再打开后窗口内容不刷新问题及解决

    el-dialog关闭再打开后窗口内容不刷新问题及解决

    这篇文章主要介绍了el-dialog关闭再打开后窗口内容不刷新问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • 手把手教你创建vue3项目的最佳方式

    手把手教你创建vue3项目的最佳方式

    如今的Vue3已经势不可挡,当然搭建一个全新的Vue3项目也有了全新的方式,下面这篇文章主要给大家介绍了关于如何手把手教你创建vue3项目的最佳方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue+js点击箭头实现图片切换

    vue+js点击箭头实现图片切换

    这篇文章主要为大家详细介绍了vue+js点击箭头实现图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue+WebSocket页面实时刷新长连接的实现

    Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新，数据较大，会出现卡死情况，所以本文主要介绍了页面实时刷新长连接，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue实现简单的跑马灯

    Vue实现简单的跑马灯

    这篇文章主要为大家详细介绍了Vue实现简单的跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论