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不会。
