vue页面传参

VUE页面传参

创建跳转按钮

xxxxxxxxxx
<template slot-scope="scope">  <el-button type="success" size="small" icon="el-icon-download" 
@click="connectHost(scope.row.id)">连接</el-button></template>

本窗口传参

URL里传参

传参 path 和 query 必须

xxxxxxxxxx
connectHost(id) {  
    this.$router.push({ path: '/webterminal', name: 'WSTerminal', query: { hostid: id }})  

接收query

xxxxxxxxxx
 this.$route.query.hostid

URL里隐藏参数

传参 name 和 query 必须

xxxxxxxxxx
connectHost(id) {  
    this.$router.resolve({ path: '/webterminal', name: 'WSTerminal', params: { hostid: id }})  

接收params

xxxxxxxxxx
 this.$route.params.hostid

新窗口传参

URL里传参

传参

xxxxxxxxxx
connectHost(id) {  
    const newpage = this.$router.resolve({ path: '/webterminal', name: 'WSTerminal', query: { hostid: id }})  
    window.open(newpage.href, '_blank')  

接收query

xxxxxxxxxx
 this.$route.query.hostid

URL里隐藏参数

传参

xxxxxxxxxx
connectHost(id) {  
    const newpage = this.$router.resolve({ path: '/webterminal', name: 'WSTerminal', params: { hostid: id }})  
    const newWindow = window.open(newpage.href, '_blank')  
    newWindow.hostid = id}

接收window

xxxxxxxxxx
 window.hostid