vue中open.window跳转

这些都是打开一个新的页面

第一种携带参数：

<vue-seamless-scroll :data="warningList" class="ai-left-bj-nav">
            <ul class="item">
              <li v-for="item in warningList" @click="clickAlarm(item)">

    clickAlarm(item){
      const routeData = this.$router.resolve({
        path: '/aibox/alarm', // 跳转的路径
        query: {
          smallClass: item.id // 携带的的参数信息
        }
      })
      window.open(routeData.href, '_blank')
    },

 携带参数传递过去页面接受方式，在data中声明一个全局的变量接受即可

this.qrcodeData1 = this.$route.query.category

第二章不携带参数：

 <div class="ai-back" @click="goTarget('/aibox/camera')">

方法后面的是跳转的页面路径

  goTarget(href) {
      window.open(href, "_blank");
    },

第三：在获取不到参数的情况下需要使用参数跳转

  <div class="ai-left-bjqy-right" @click="clickAlarm3('/aibox/alarm','area8')">
                <span>{{ area8 }}</span>
                <font>{{ regionWarningNum8 }}</font>
              </div>

这里的type可有自己定义，将参数值与区分开与后台对应即可

 clickAlarm4(href,type){
      let routeData = this.$router.resolve({ path: '/aiboxAlarm', query: {category:type} });
      window.open(routeData.href, '_blank');
    },

echarts图中的点击跳转页面携带参数，在绑定id下方调用点击事件即可

   var myChart = echarts.init(document.getElementById('main1'));
      myChart.on("click",function (param){
        console.log(param,"pp")
        let routeData = sely.$router.resolve({ path: '/aiboxAlarm', query: {idx:JSON.stringify(param.data)} });
        window.open(routeData.href, '_blank');
      })

存在多个点击事件的时候需要判断点过来没有参数的情况

  if ( this.qrcodeData2 != null &&  this.qrcodeData2 != '' ){
      this.qrcodeData2 = JSON.parse(this.qrcodeData2);
    }

 这个是给后台传值的方式

补充：使用window.open跳转没有菜单的情况

在路由中自行去定义路由方式

  {
    path: '/parOrgMore',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/parOrgMore',
        component: () => import('@/views/components/partOrg/parOrgMore'),
        name: 'Profile',
        meta: { title: '会议列表', icon: 'user' }
      }
    ]
  },

 

 可以直接跳转固定页面，无需配置菜单

也可以使用这个

this.$router.push('/parOrgMore')

不打开新的页面，跳转菜单，但是当菜单打开时会存在问题

 <a href="javascript:;" style="color: #00a2ff" @click="goEnviro()">{{scope.row.cardNum}}</a>

跳转方法

   goEnviro() {
        this.$router.push({path: '/views/card', query: {card: '1'}})
      },

在需要打开的那个页面接受值

注意：子页面接受的时候是this.$route.query，是没有r的

const data = this.$route.query

跳转导航栏，每次点击数据不同

使用router-link跳转

  <router-link :to="{name:'checkDetail',params:{title:scope.row.title}}" class="link-type">
            <span>{{ scope.row.title }}</span>
          </router-link>

在router.js里的公共路由写

  {
    path: '/checkDetail',
    component: Layout,
    hidden: true,
    redirect: 'checkDetail',
    children: [
      {
        path: 'checkDetail/:title',
        component:  () => import('@/views/patrol/checkDetail/index'),
        name: 'checkDetail',
        meta: {title: '检查项明细', icon: 'user'}
      }
    ]
  },

跳转页面接收

   this.queryParams.formTitle = this.$route.params.title

详解vue 路由跳转四种方式 (带参数)_Linux小百科的博客-CSDN博客_vue路由跳转携带参数

关于跳转的一些方式参考地址

data中有父页面给的值，将给过来的值放入页面的查询条件就可以实现只出对应的那一条数据

vue中的页面穿透，点击某一处，直接打开详情或者新增页面

如果是从弹窗中点击穿透到弹窗，需要将原来的先关闭，否则会出现关闭穿透的页面后出现黑色部分

    <el-form-item label="问题来源维修单:" >
                      <router-link :to="'/repair/record/index/' + manageForm.repairId" class="link-type"  >
                        <span @click="gbDialog"> {{ (manageForm.oldNum) }}</span>
                      </router-link>
                  </el-form-item>

在router路由中配置需要打开的页面还有传递的值

  {
    path: '/repair/record',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'index/:repairId(\\d+)',
        component: (resolve) => require(['@/views/workOrder/repairRecord/index'], resolve),
        name: 'RepairRecord',
        meta: { title: '维修记录详情', activeMenu: '/workOrder/repairRecord'}
      }
    ]
  },

在需要打开的页面中，在created下面加

  const repairId = this.$route.params && this.$route.params.repairId;
    if(repairId!=undefined){
      this.checkDetails({id:repairId})
    }

跳转到外部链接 点击事件

<a @click="getOverview" >

方法

getOverview() {
      window.open( "http://www.huaruinet.net/");
    },