vue跳轉頁面開啟新視窗,並攜帶與接收引數方式

2022-04-09 19:00:15

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>

接收引數依然使用