Vue--问题解决

原创

IT利刃出鞘 2022-03-23 16:15:07 博主文章分类：Vue ©著作权

©著作权归作者所有：来自51CTO博客作者IT利刃出鞘的原创作品，请联系作者获取转载授权，否则将追究法律责任

Cannot read property 'xxx' of undefined

src/components/Blog.js：

//...
export default {
  data () {
    return {
      blog: {}
    }
  },
  mounted() {
    this.$http.get('http://siwei.me/api/interface/blogs/show?id='+this.$route.query.id).then((response) => {
      this.blog = response.body.result
    }, (response) => {
      console.error(response)
    });
  }
}
//...

src/routers/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import HelloWorld from '@/components/HelloWorld'
import Blog from '@/components/Blog'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/blog',
      name: 'blog',
      component: Blog
    }
  ]
})

浏览器报错信息

Vue--问题解决_vue.js

原因：没有引入Vue.$http.get所需的包

解决方法：在 index.js中引入vue-resource包并使用

import Vue from 'vue'
import Router from 'vue-router'
import vueRsource from 'vue-resource'

Vue.use(vueRsource);
Vue.use(Router)

import HelloWorld from '@/components/HelloWorld'
import SayHi from '@/components/sayHi'
import Blog from '@/components/Blog'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/blog',
      name: 'blog',
      component: Blog
    }
  ]
})