router-link传参与页面刷新

router-view视图传值与页面刷新问题

问题由来：
    写一个问卷调查的页面，在页面右侧采用了router-view使页面内容更新，
    但在使用router-link进行传值时，因为页面在第一次刷新时就要从父组件
    中获取值且传的值是数组，而导致因为页面刷新而导致的参数传递过去
    获取不到内部数据。

最后的效果图

a-1-1.PNG

router-view的视图区域

a-1-2.PNG

错误写法

传递参数

<li class="choice">
     <router-link tag='div' :to="{name: 'Surface', query: {database: Data}}">学生评教</router-link>
</li>
Data为一个数组

接受参数

Data: this.$route.query.database,

视图页面渲染

<ul>
    <li
      v-for="item in Data"
      :key="item.id"
      :style="item.color"
      @click="handleClickClass()"
    >
      <h5>授课教师：{{item.teacher}}</h5>
      <p class="classInfo">科目：{{item.subject}}</p>
      <p class="classInfo">班级：{{item.classify}}</p>
    </li>
</ul>

控制台报错

a-1-3.PNG

传给视图的参数格式不对，数据无法渲染，因此页面如下

a-1-6.PNG

既然数据格式不对，自然要转换数据格式

传递参数

  created () {
    this.formatChange()
  },
  methods: {
    formatChange () {
      this.classify = JSON.stringify(this.Data)
    }
  },

<li class="choice">
 <router-link tag='div' :to="{name: 'Surface', query: {database: classify}}">学生评教</router-link>
</li>

将数组转换为字符串，这样才能传递给router-view视图在刷新页面时

接受参数

  mounted () {
    this.classify()
    this.above()
  },
  methods: {
    classify () {
      this.Data = JSON.parse(this.$route.query.database)
    },
    above () {
      for (let i = 0; i < this.Data.length; i++) {
        let n = i % 7
        this.Data[i].color = this.bgColor[n].color
      }
    }
  }

将传递过来的数据转换为数组，用于数据的渲染，成功之后进入该页面即刷新时，数据渲染成功。

a-1-1.PNG

解决思路：
    主要问题出现在页面刷新时对参数传递的影响，在这里便通过数据类型转换绕开该问题
    JSON.stringify()
    JSON.parse()

query和params区别
    query要用path引入路径，params要用name引入路径，

    发送数据
    this.$router.push({
       name: 'detail',
       params: {
          data: '这是传输的数据'
       }
    })
    this.$router.push({
        path: '/detail',
        query: {
            data: '这是传输的数据'
        }
    })

    接受数据
    this.$route.params.data
    this.$route.query.data
    
    query传输数据时，传输的数据会显示在地址栏，而params不会。    

这样的方案可以会不太好，以及自己写的文章可能有很多错误，欢迎大家留言，我会及时改正。