解决vuecli使用this.$router.push跳转传参，参数在页面正常显示，控制台报空问题_vue this.$route.query 赋值后 html调用为null

错误示例

在传参页面用
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
    };
  },
1
2
3
4
5
6

页面显示正常 但控制台报news变量为null错误

出错原因

vue会在mounted方法执行之前渲染页面，此时news为null，无title、time等属性，故报错

解决方法

将data中定义的news变量的属性名都列出来，此时虽然news仍未赋值，但的确有title、time等属性，vue会在赋值后，自动进行一次页面的更新渲染

 data() {
    return {
      news: {
        title: "",
        time: "",
        content: "",
        image: "",
      },
    };
  },
1
2
3
4
5
6
7
8
9
10