vue 通过query和params两种跳转传参方法打开新的页面并传参 还有一些其他方法

最近，项目完结想写一些总结性的的东西，今天发现vue页面跳转页也有好几种，最简单的a标签跳转，这里就不在阐述了，有query和params两种跳转传参方法，还有一些其他方法。
query跳转传参方法：
第一种写法：提到的是通过router携带query的方法进行跳转，在链接后面添加query参数：
http://localhost:8888/#/fruits?data=111
需要传数据的页面：

<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
	</div>
</template>
<script> 
  export default {
    data(){
      return {
        formInline: {
          user: ''
        }
      }
    },
    methods: {
      onSubmit(){
        this.$router.push({
          path: "/fruits",
          query: {
            data:this.formInline.user ,
          },
        });
      }
	  },
  }
</script>

跳转到的页面：

<template>
  <div>
    <span>我是fruits页面,您输入的审批人是{{data}}</span>
	</div>
</template>
<script>
  export default {
    data(){
      return{
        data:""
      }
    },
    created(){
      this.data = this.$route.query.data
	  },
  }
</script>

第二种写法：

<router-link :to="{ path: '/fruits', query : { data:formInline.user } }">查询</router-link>

接参数的方法一样

params传参方法：
第一种：提到的是通过router携带params的方法进行跳转，链接后面不添加params参数：
http://localhost:8888/#/fruits
需要传数据的页面：

<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
	</div>
</template>
<script> 
  export default {
    data(){
      return {
        formInline: {
          user: ''
        }
      }
    },
    methods: {
      onSubmit(){
        this.$router.push({
          name: "fruits",
          params: {
            data:this.formInline.user ,
          },
        });
      }
	  },
  }
</script>

跳转到的页面：

<template>
  <div>
    <span>我是fruits页面,您输入的审批人是{{data}}</span>
   </div>
</template>
<script>
  export default {
    data(){
      return{
        data:""
      }
    },
    created(){
      this.data = this.$route.params.data
	},
  }
</script>

第二种方法：

<router-link :to="{ name: 'fruits', params: { data:formInline.user } }">查询</router-link>

接参数的方法一样

query和params的区别：
query参数是path，跳转到的页面上有query的参数。
params参数是name，跳转到的页面上没有参数。

其他方法：
js方法：window.open(url, ‘_blank’) // 打开一个新的页面
jq方法：$(“.name”).attr(“href”, url); //跳转到url页面不打开新页面