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

路由

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

npm安装：

 npm install vue-router 

使用范例：

 1 // router/index.js
 2 import Vue from 'vue'
 3 import Router from 'vue-router'
 4 import Login from '@/pages/login'
 5 import Home from '@/pages/home'
 6 
 7 Vue.use(Router)
 8 const router = new Router({
 9   routes: [
10     {
11       path: '/',
12       name: 'login',
13       component: Login
14     },
15     {
16       path: '/home',
17       name: 'home',
18       component: Home,
19       meta: {//meta是拓展，默认为空
20         privilegeLevel: 1//自定义字段，此处用来表示访问的权限级别
21       }
22     }
23   ]
24 })
25 
26 export default router;

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

拓展知识

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

不带参数

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

query传参

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

params传参

 1 this.$ router.push({name:'home',params: {id:'1'}}) // 只能用 name
 2 
 3 // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
 4 
 5 // 不配置path ,第一次可请求,刷新页面id会消失
 6 
 7 // 配置path,刷新页面id会保留
 8 
 9 // html 取参 $ route.params.id
10 
11 // 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

 1 axios
 2  .get('https://127.0.0.1/user',
 3  {
 4   params: {//参数
 5           userId:1,
 6           password:123345
 7           }
 8  })
 9  .then(response => {
10  //response是返回结果
11  })
12  .catch(function (error) { // 请求失败
13    console.log(error);
14  });

Post

 1 axios
 2  .post('https://127.0.0.1/user',
 3  {//参数
 4   userId:1,
 5   password:123345
 6  })
 7  .then(response => {
 8  //response是返回结果
 9  })
10  .catch(function (error) { // 请求失败
11    console.log(error);
12  });

所有请求方式：

• 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对象)：

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

axios默认值

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

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

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

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