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// 为已知需要花费很长时间的请求覆写超时设置
 });