错误示例
在传参页面用
this.$router.push({ path: "/m/singleNews", query: { news: this.news } });
语句
来进行页面的跳转并传参
在被传参的页面的mounted方法中用
this.news = this.$route.query.news;
语句
来接收传递来的参数,并赋值给data中定义的news变量
在页面上通过{{news.title}}
{{news.time}}
等进行显示
// data中定义的news变量
data() {
return {
news: null
};
},
页面显示正常 但控制台报news变量为null错误
出错原因
vue会在mounted方法执行之前渲染页面,此时news为null,无title、time等属性,故报错
解决方法
将data中定义的news变量的属性名都列出来,此时虽然news仍未赋值,但的确有title、time等属性,vue会在赋值后,自动进行一次页面的更新渲染
data() {
return {
news: {
title: "",
time: "",
content: "",
image: "",
},
};
},