vue路由(router)与resource

背景

• 传统的路由均需要刷新网页跳转，vue-router则不用，大大提高了路由效率
• vue-resource是请求数据的插件

方法

vue-router

1.安装

npm install vue-router --save-dev

2.引用

main.js中

import VueResouce from "vue-resource"

Vue.use(VueRouter)

const router = new VueRouter({
	routes:[
		{path:"/pathName",component:youConponentName}
	],
	mode:"history"  //删除路由时的 #
})

new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

3.template中的使用

<router-link to="/users">users</router-link>
<router-view></router-view>

vue-resource

1.安装

npm install vue-resource --save-dev

2.引用

main.js中

import VueResouce from "vue-resource"

Vue.use(VueResouce)

3.使用

使用http://jsonplaceholder.typicode.com/users的数据

this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then((data)=>{
          console.log(data);

} )

整体代码

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld'
import Users from './components/Users'
import VueResouce from "vue-resource"

Vue.config.productionTip = false
//router 配置
Vue.use(VueRouter)
Vue.use(VueResouce)
const router = new VueRouter({
	routes:[
		{path:"/users",component:Users},
		{path:"/",component:HelloWorld}
	],
	mode:"history"
})

/* eslint-disable no-new */
new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    
    <ul>
          <li><router-link to="/users">users</router-link></li>
          <router-view></router-view>
    </ul>
  </div>
</template>

<script>
  import Users from './components/Users'
  import Header from './components/Header'
  import Footer from './components/Footer'

  export default {

    data(){
      return {
        title:"未改变之前"
      }
    },
    methods:{
      updateTitle:function(title){
        this.title = title
      }
    },
    components:{
      "users":Users,
      "app-header":Header,
      "app-footer":Footer
    }
    
  }

</script>

<style scoped>
  h1{
    color:red;
  }
</style>

Users.vue

<template>
  <div class="users">
    <ul>
      <li v-for="user in users">
        <h2>{{user.name}}</h2>
        <h3>{{user.email}}</h3>
      </li>
    </ul>
    
  </div>

</template>
<script>
  export default{
    name:"users",

    data(){
      return{
      }
    },
    methods:{
 
    },
    created:function(){
      this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then((data)=>{
          //console.log(data);
          this.users = data.body;
        } )
    }
  }
</script>

<style scoped>
  .users{
    width:100%;
    max-width:1200px;
    margin:40px auto;
    padding:0 20px;
    box-sizing:border-box;

  }

  ul{
    display:flex;
    flex-wrap:wrap;
    list-style-type:none;
    padding:0px;;
  }

  li{
    flex-grow:1;
    flex-basis:200px;
    text-align:center;
    padding:25px;
    border:1px solid #222;
    margin:20px;
  }
</style>

HelloWorld.vue 就一句话 HelloWorld

结果