Vue的路由和HTTP请求

今天我学习了Vue的路由和HTTP请求。Vue的路由可以让我们在前端实现单页面应用，通过路由管理页面的切换和参数传递：

const Foo = { template: '<div>foo</div>' }

const Bar = { template: '<div>bar</div>' }

 

const routes = [

  { path: '/foo', component: Foo },

  { path: '/bar', component: Bar }

]

 

const router = new VueRouter({

  routes

})

 

var app = new Vue({

  router

})

 

然后在html中使用路由相关的标签实现页面的切换：

<router-link to="/foo">Go to Foo</router-link>

<router-link to="/bar">Go to Bar</router-link>

<router-view></router-view>

 

获取后端数据可以通过Vue的HTTP库axios实现：

var app = new Vue({

  el: '#app',

  data: {

    items: []

  },

  created: function() {

    axios.get('/api/items')

      .then(function(response) {

        this.items = response.data

      }.bind(this))

  }

})

 

明天我将继续学习Vue的状态管理和vuex库。