vue-路由router&请求resource

• 安装vue-router插件

$ npm install vue-router --save-dev

在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方

import Vue from 'vue'
import VueRounter from 'vue-router'
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'

// import Users from './components/Users'

Vue.config.productionTip = false
Vue.use(VueRounter)
//配置路由
const router = new VueRounter({
routes:[
      {path:"/",component:Home},
      {path:"/helloworld",component:HelloWorld}
  ],
  //去掉  '#/‘
  mode:"history",
})
//全局注册组件
// Vue.component('users',Users);
new Vue({
  router,   
  el: '#app',
  template: '<App/>',
  components: { App },
})

//使用<a>会从新加载一遍 所以使用<helloworld>标签
<template>
  <div id="app">
   <ul>
     <li>
      <router-link to="/">Home</router-link>
     </li>
     <li>
     <router-link to="/helloworld">Helloworld</router-link>
     </li>
   </ul>
   <router-view></router-view>
  </div>
</template>

• 安装vue-resource插件

$ npm install vue-router --save-dev

---main.js-------------------------------
import VueResource from 'vue-resource'
Vue.use(VueResource)
---组件中-------------------------------
created(){
this.$http.get('http://jsonplaceholder.typicode.com/users').then((response) => {
            
            this.users = response['body'];

           }, (response) => {
            // 响应错误回调
        });
     },

参考文章：https://jsfiddle.net/yyx990803/xgrjzsup/
https://blog.csdn.net/sinat_17775997/article/details/52549123