vue路由(router)与resource

迈不过友情╰ 2021-12-11 03:27 272阅读 0赞

# 背景 #

*  传统的路由均需要刷新网页跳转，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][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

### 结果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4OTE3NQ_size_16_color_FFFFFF_t_70][]

[http_jsonplaceholder.typicode.com_users]: http://jsonplaceholder.typicode.com/users
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4OTE3NQ_size_16_color_FFFFFF_t_70]: /images/20211211/5332ae06b8084597b5329ba4cc93139a.png