vue--05 router和axios

1. 路由vue-router

1.1 安装使用

• 官方文档：https://router.vuejs.org/zh/

• 安装

cnpm install vue-router

1.2 项目代码

• /src/main.js

// /src/main.js

// 导入vue.js
import Vue from 'vue'

// 导入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 路由
// 导入vue router
import router from './router/index'

// 创建实例之前加入
Vue.use(ElementUI);

//导入APP.vue根组建
import App from './App.vue'


Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App), //渲染APP根组件
}).$mount('#app')   //将app挂载到VM控制区域

• /src/router/index.js

• 定义路由规则

// /src/router/index.js


// 0. 安装并倒入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components
// const Home = { template: '<div>home</div>' }
// const Foo = { template: '<div>foo</div>' }

import demo from '../components/demo'
import HelloWorld from '../components/HelloWorld'
import login from '../components/login'


// 3. Create the router
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    // 数组中一个对象即为一个路由
    { path: '/login', component: login },
    { path: '/hello', component: HelloWorld },
    { path: '/demo', component: demo },
  ]
})

// 4. 导出路由
export default router;

• App.vue

// App.vue


<template>
  <div id="app">
    <ul>
      <!-- to属性默认为path路径，也可以使用重命名name-->
      <li><router-link to="/">主页</router-link></li>
      <li><router-link to="/login">登陆</router-link></li>
      <li><router-link :to="{ name: 'ly' }">布局</router-link></li>
      <li><router-link to="/helloworld">欢迎</router-link></li>
    </ul>
    <!-- 使用路由 -->
    <router-view/>
  </div>
</template>

<script>
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 0px 0px;
  width: 100%;
  height: 100%;
}
</style>

1.3 获取参数

• 字符串参数：url?a=b&c=d

export default {
  ......
  created(){
    this.a = this.$route.query.a
    console.log(this.a)
  }
}

• 路径传参数：url/id

//  src/router/index.js

// 3. Create the router
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    // 路径传参方式需要额外定义
    { path: '/helloworld/:id', component: HelloWorld },
  ]
})

export default {
  ......
  created(){
    this.a = this.$route.params.id
    console.log(this.a)
  }
}

1.4 嵌套路由

// src/router/index.js


const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [               // 父路由
    { 
      path: '/index',     
      component: index,
      children: [         // 子路由
        { path: '', component: demo1 },
        { path: 'demo2', component: demo2 },
        { path: '/demo3', component: demo3 },

      ]
    }
  ]
})

2. 异步请求axios

2.1 安装使用

• 安装

npm install axios -S

• 使用一

<template>
  <div class="hello">
  </div>
</template>

<script>

import axios from 'axios';

export default {
  // 此时不能使用this获取参数，因为this指当前函数对象并不是Vue对象，需要使用=>函数
  mounted(){
    axios.get('https://dog.ceo/api/breeds/image/random')
        .then(function (response) {
          console.log(response) 
        })
        .catch(function (err) {
          console.log(err)
        })
  }};
</script>
<style>
</style>

• 使用二：箭头函数

<template>
  <div class="hello">
    <el-image
      :src="url"
      fit="cover">
    </el-image>
  </div>
</template>

<script>

import axios from 'axios';

export default {
  data(){
    return {
      url: '',
    }
  },
  mounted(){
    axios.get('https://dog.ceo/api/breeds/image/random')
        .then(response=>{
          console.log(response) 
          this.url = response.data.message
        })
        .catch(function (err) {
          console.log(err)
        });
  }
}
</script>

<style>
</style>

2.2 箭头函数

• 参考文档

• https://blog.csdn.net/weixin_42218847/article/details/81540996
• https://blog.csdn.net/m0_37686205/article/details/88776259

• api封装

//  src/api/api.js
import axios from 'axios';

var host = 'https://dog.ceo';


export const dogs = () => {	
    return axios.get(`${host}/api/breeds/image/random`)	
};

<template>
  <div class="hello">
    <el-image
      :src="url"
      fit="cover">
    </el-image>
  </div>
</template>

<script>

// import axios from 'axios';
import {dogs} from '../api/api'   // 导入api中的函数

export default {
  data(){
    return {
      url: '',
    }
  },
  mounted(){
    dogs()          // 使用导入的api函数
        .then(response=>{
          console.log(response) 
          this.url = response.data.message
        })
        .catch(function (err) {
          console.log(err)
        });
  }
}
</script>

<style>
</style>

2.3 预检请求

• 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求，浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错
• 可参考http://www.ruanyifeng.com/blog/2016/04/cors