路由
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 });
作者：Mr.Jimmy
