vue报错 [Vue warn]: Error in render_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

[Vue warn]: Error in render: "TypeError: Cannot read property 'user_name' of undefined"

found in

---> <MainPage> at src/components/mainPage.vue
       <App> at src/App.vue
         <Root>
warn @ vue.esm.js?efeb:628
vue.esm.js?efeb:1897 TypeError: Cannot read property 'user_name' of undefined
    at eval (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-24282010","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/mainPage.vue (app.js:8497), <anonymous>:190:43)
    at Proxy.renderList (vue.esm.js?efeb:2660)
    at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-24282010","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/mainPage.vue (app.js:8497), <anonymous>:178:23)
    at VueComponent.Vue._render (vue.esm.js?efeb:3557)
    at VueComponent.updateComponent (vue.esm.js?efeb:4075)
    at Watcher.get (vue.esm.js?efeb:4488)
    at new Watcher (vue.esm.js?efeb:4477)
    at mountComponent (vue.esm.js?efeb:4082)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:9063)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:11974)

实在不知道错哪了，望赐教。

<template>
  <div id="mainPage" style="height:100%;width:100%">
<!--    <a-layout id="components-layout-demo-top-side-2">-->
    <div id="header">
      <div class="logo">知&nbsp;否</div>

      <div id="title" @click="mainPage">
        <a-icon type="home" />&nbsp;首页
        <a-icon type="user" />&nbsp;个人中心
      </div>
        <input
            placeholder="input search text"
            size="large"
            @search="onSearch"
       >
        <button type="button" id="search" @click="onSearch" style="
    height: 15px;
    width: 80px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color:white;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: lightblue;



    transform: translateY(4px);
">提问</button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 20px 5px 10px 20px;">
        <a-icon type="bell"/>&nbsp;通知
        </div>
<!--        <div style="display: inline-block">
          ![](../assets/logo.png)
        </div>-->
        <template>
          <a-dropdown>
            <a style="color:white;font-size:15px" >
              {{ user_name }} <a-icon type="down" style="color:white;font-size:20px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="logout" />
                退出
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </template>

      </div>
    </div>

      <a-layout style="height:520px">

        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">

          </a-breadcrumb>
          <a-layout-content
              :style="{ background: '#fff', padding: '14px', margin: 0, minHeight: '280px',width: '900px' }"
          >
            <div id="container_header">
              <a-menu mode="horizontal">
                <a-menu-item>推荐 </a-menu-item>
                <a-menu-item>关注</a-menu-item>
                <a-menu-item>热榜</a-menu-item>
              </a-menu>
            </div>
              <div id="question_block" v-for="item in questions">
                <p style="font-size: 15px;margin:5px">{{item.user_name}}&nbsp;的提问期待你的解答</p>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if="item.question_end_State===0">已终结</div>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if="item.question_end_State===1">未终结</div>
                <p id="question_title" style="font-size:20px;font-weight: bold;margin:6px">{{item.question_name}}</p>
                <a @click="getAllAnswers">{{item.question_text}}&nbsp;&nbsp;查看全文&nbsp;<a-icon type="down" /></a><br/><br/>
                <a-button style="background: lightskyblue"><a-icon type="edit" />写回答</a-button>
                <div style="font-size: 14px;float:right;display:inline-block">{{item.question_date}}</div>
<!--                :{{item.question_shield_state}}:{{item.question_end_State}}:-->


              </div>

          </a-layout-content>
          <div id="side_card">
            <div
                style="height: 30px;
                      width: 100%;
                      text-align: center;
                      padding: 10px 0;
                      font-size: 20px;">
              创作中心
            </div>
            <a-divider style="margin:17px 0 13px 0;"/>

            <div style="height:80px;width:100%">
            <div style="height: 80px;width: 150px;padding: 0 0 0 20px;">
            <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;" @click="publishQuestions">
              <a-icon type="edit" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
              发布问题
            </div>
            </div>

            <div style="position:absolute;
            display:inline-block;
            left: 150px;
            right: 0px;
            top: 60px;
            height: 80px;
            width: 10px;">
              <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;">
                <a-icon type="video-camera" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
                发视频
              </div>
            </div>

            </div>
            <a-divider style="margin:17px 0 13px 0;"/>

            <a-row>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                稍后发
              </a-col>
              <a-divider type="vertical" style="height: 50px; position: absolute;right: 125px;"/>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                存草稿
              </a-col>
            </a-row>

          </div>
        </a-layout>

      </a-layout>
<!--      </a-layout>-->

  </div>

</template>

<script>

export default {
  name: 'mainPage',
  data () {
    return {
      questions: {
        question_id: this.$route.params.question_id,//路由传值
      },


      user_id:'',
      user_name:'',
      question_end_State:'',
    }
  },
  components:{

  },
  created:function() {
    console.log('created');
    this.getParameter();
    this.$nextTick(() => {
      // 在此处执行你要执行的函数
      this.getAllQuestions();

    })
  },
  methods: {
    getParameter(){
      // 将数据放在当前组件的数据内

        this.user_id = this.$route.params.user_id;
        this.user_name=this.$route.params.user_name

    },

    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    //分页获得所有的问题
    getAllQuestions () {
      var _this = this;
      _this.$axios.post('/api/question/getAllQuestions',
        _this.$qs.stringify({

        })
      ).then(function (response) {
        console.log("打印response.data：");
        console.log(response.data)
        console.log("打印list：");
        console.log(response.data.data)
        console.log("打印question_end_State:")
        console.log(response.data.data.question_end_State)
        _this.questions = response.data.data;
        console.log("this.questions" + _this.questions)
      }).catch(function (error) {
        console.log(error);

      });
    },
    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },
    onSearch (value) {
      console.log(value)
    },
    mainPage(){
      this.$router.push({name:"mainPage"})
    },
    publishQuestions(){
      console.log(this.user_id,this.user_name);
      this.$router.push({name:"publishQuestions",params:{user_id:this.user_id,user_name:this.user_name}})
    },
    getAllAnswers() {
      var _this = this;
      _this.$axios.post('/api/answer/getAllAnswers',
        _this.$qs.stringify({
            question_id:_this.question_id
        })
      ).then(function (response) {

        console.log('打印问题id:'+_this.question_id)



      }).catch(function (error) {
        console.log(error);

      });
    },


  },



}
</script>

<style scoped>
@import "../assets/index.css";
</style>
<template>
  <div id="mainPage" style="height:100%;width:100%">
<!--    <a-layout id="components-layout-demo-top-side-2">-->
 <div id="header">
      <div class="logo">知&nbsp;否</div>
      <div id="title" @click="mainPage">
        <a-icon type="home" />&nbsp;首页
 <a-icon type="user" />&nbsp;个人中心
 </div>
        <input
 placeholder="input search text"
 size="large"
 @search="onSearch"
 >
        <button type="button" id="search" @click="onSearch" style="
 height: 15px;
    width: 80px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color:white;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: lightblue;
    transform: translateY(4px);
">提问</button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 20px 5px 10px 20px;">
        <a-icon type="bell"/>&nbsp;通知
 </div>
<!--        <div style="display: inline-block">
 <img alt="Vue logo" src="../assets/logo.png" style="width:50px;height:50px;padding: 0 0 10px 10px;"> </div>--> <template>
          <a-dropdown>
            <a style="color:white;font-size:15px" >
              {{ user_name }} <a-icon type="down" style="color:white;font-size:20px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
 </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="logout" />
                退出
 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </div>
    </div>
      <a-layout style="height:520px">
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">
          </a-breadcrumb>
          <a-layout-content
 :style="{ background: '#fff', padding: '14px', margin: 0, minHeight: '280px',width: '900px' }"
 >
            <div id="container_header">
              <a-menu mode="horizontal">
                <a-menu-item>推荐 </a-menu-item>
                <a-menu-item>关注</a-menu-item>
                <a-menu-item>热榜</a-menu-item>
              </a-menu>
            </div>
              <div id="question_block" v-for="item in questions">
                <p style="font-size: 15px;margin:5px">{{item.user_name}}&nbsp;的提问期待你的解答</p>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if="item.question_end_State===0">已终结</div>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if="item.question_end_State===1">未终结</div>
                <p id="question_title" style="font-size:20px;font-weight: bold;margin:6px">{{item.question_name}}</p>
                <a @click="getAllAnswers">{{item.question_text}}&nbsp;&nbsp;查看全文&nbsp;<a-icon type="down" /></a><br/><br/>
                <a-button style="background: lightskyblue"><a-icon type="edit" />写回答</a-button>
                <div style="font-size: 14px;float:right;display:inline-block">{{item.question_date}}</div>
<!--                :{{item.question_shield_state}}:{{item.question_end_State}}:-->
 </div>
          </a-layout-content>
          <div id="side_card">
            <div
 style="height: 30px;
                      width: 100%;
                      text-align: center;
                      padding: 10px 0;
                      font-size: 20px;">
              创作中心
 </div>
            <a-divider style="margin:17px 0 13px 0;"/>
            <div style="height:80px;width:100%">
            <div style="height: 80px;width: 150px;padding: 0 0 0 20px;">
            <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;" @click="publishQuestions">
              <a-icon type="edit" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
              发布问题
 </div>
            </div>
            <div style="position:absolute;
            display:inline-block;
            left: 150px;
            right: 0px;
            top: 60px;
            height: 80px;
            width: 10px;">
              <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;">
                <a-icon type="video-camera" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
                发视频
 </div>
            </div>
            </div>
            <a-divider style="margin:17px 0 13px 0;"/>
            <a-row>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                稍后发
 </a-col>
              <a-divider type="vertical" style="height: 50px; position: absolute;right: 125px;"/>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                存草稿
 </a-col>
            </a-row>
          </div>
        </a-layout>
      </a-layout>
<!--      </a-layout>-->
 </div>
</template>
<script>
export default {
  name: 'mainPage',
  data () {
    return {
      questions: {
        question_id: this.$route.params.question_id,//路由传值
 },
      user_id:'',
      user_name:'',
      question_end_State:'',
    }
  },
  components:{
  },
  created:function() {
    console.log('created');
    this.getParameter();
    this.$nextTick(() => {
      // 在此处执行你要执行的函数
 this.getAllQuestions();
    })
  },
  methods: {
    getParameter(){
      // 将数据放在当前组件的数据内
 this.user_id = this.$route.params.user_id;
        this.user_name=this.$route.params.user_name
 },
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    //分页获得所有的问题
 getAllQuestions () {
      var _this = this;
      _this.$axios.post('/api/question/getAllQuestions',
        _this.$qs.stringify({
        })
      ).then(function (response) {
        console.log("打印response.data：");
        console.log(response.data)
        console.log("打印list：");
        console.log(response.data.data)
        console.log("打印question_end_State:")
        console.log(response.data.data.question_end_State)
        _this.questions = response.data.data;
        console.log("this.questions" + _this.questions)
      }).catch(function (error) {
        console.log(error);
      });
    },
    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },
    onSearch (value) {
      console.log(value)
    },
    mainPage(){
      this.$router.push({name:"mainPage"})
    },
    publishQuestions(){
      console.log(this.user_id,this.user_name);
      this.$router.push({name:"publishQuestions",params:{user_id:this.user_id,user_name:this.user_name}})
    },
    getAllAnswers() {
      var _this = this;
      _this.$axios.post('/api/answer/getAllAnswers',
        _this.$qs.stringify({
            question_id:_this.question_id
 })
      ).then(function (response) {
        console.log('打印问题id:'+_this.question_id)
      }).catch(function (error) {
        console.log(error);
      });
    },
  },
}
</script>
<style scoped>
@import "../assets/index.css";
</style>

万分感激。

###

跑过你的代码，由于服务器数据我这请求不到，但是尝试跑你的代码的时候发现没有安装vue-router，安装了这个，有类似的报错，以下是我怀疑出错的行,你是安装没装好vue-router还是网页路径参数没写对，你看看

    getParameter() {
      // 将数据放在当前组件的数据内
      this.user_id = this.$route.params.user_id;
      this.user_name = this.$route.params.user_name;
    },

###

if (this.$route.params && this.params.user_name) {
    this.user_name = this.params.user_name
}