Vue入门教程 第六篇 （路由、axios）

路由

Vue.js 路由需要载入 vue-router 库。

npm安装：

 npm install vue-router 

使用范例：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login'
import Home from '@/pages/home'

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {//meta是拓展，默认为空
        privilegeLevel: 1//自定义字段，此处用来表示访问的权限级别
      }
    }
  ]
})

export default router;

其中，path是url路径，name是路由名称，component是组件，meta是拓展属性，可以自定义。

拓展知识

router为VueRouter的实例，相当于一个全局的路由器对象，利用它我们可以实现页面跳转。

不带参数

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

query传参

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $ route.query.id
// script 取参 this.$ route.query.id

params传参

this.$ router.push({name:'home',params: {id:'1'}}) // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,

// 不配置path ,第一次可请求,刷新页面id会消失

// 配置path,刷新页面id会保留

// html 取参 $ route.params.id

// script 取参 this.$ route.params.id

query和params区别：

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。

axios（ajax）

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios作用与ajax一致，但是实用性更强。

npm安装：
 npm install axios 

Get

axios
 .get('https://127.0.0.1/user',
 {
  params: {//参数
          userId:1,
          password:123345
          }
 })
 .then(response => {
 //response是返回结果
 })
 .catch(function (error) { // 请求失败
   console.log(error);
 });

Post

axios
 .post('https://127.0.0.1/user',
 {//参数
  userId:1,
  password:123345
 })
 .then(response => {
 //response是返回结果
 })
 .catch(function (error) { // 请求失败
   console.log(error);
 });

所有请求方式：

• axios.request(config)
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

响应结果(response对象)：

axios.get("/user")
  .then(function(response) {
    console.log(response.data);//由服务器提供的响应
    console.log(response.status);//HTTP 状态码
    console.log(response.statusText);//来自服务器响应的 HTTP 状态信息
    console.log(response.headers);//服务器响应的头
    console.log(response.config);//为请求提供的配置信息
  });

axios默认值

当我们需要大量使用axios的时候，如果每次都要书写冗余的配置将会耗费时间且不易管理，axios允许设置默认配置，可以在调用时不再逐一设置。
全局：

//默认访问的后端服务器url
axios.defaults.baseURL = 'http://127.0.0.1:3000/';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//post的默认数据类型
axios.defaults.headers.post['Content-Type'] = 'application/json';

自定义（使用新实例覆盖全局设置）：

// 创建实例时设置配置的默认值
var instance = axios.create({
baseURL: 'http://127.0.0.1:3001/'
});
instance.defaults.timeout = 2500;
instance.get('/longRequest', {
timeout: 5000// 为已知需要花费很长时间的请求覆写超时设置
});