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>

接收參數依然使用

this.$route.params.index

“vue跳轉頁面打開新窗口并攜帶與接收參數方式是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！