axios,Vue中的路由（动态路由，嵌套路由，命名路由，编程式导航）

如何处理VUE项目在IE下的兼容

指不是 VUE项目在IE8以及以下 的兼容，指的在IE9及以上的兼容

为什么会有兼容问题:promise 在IE下不兼容

解决方法： babel-polyfill 解决

axios

一、get请求
axios.get('url?userName=小明').then(res=>{
  //成功的回调
}).catch(err=>{
  //失败回调
})

axios.get(url,{
  params:{},
  headers:{}
}).then(res=>).catch()

二、post请求

  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })  

  三、request写法
  axios({
    method:"get/post",
    url:"",
    data:{}
  });

  axios restful 请求
    restfulapi: 定义了 前后端交互 接口规范，以及前端请求规范
    前端请求方法的规范：
      请求 （获取）数据  用 get请求
      提交数据 post
      更新数据  put
      删除 delete
    后端返回数据的格式规范
      {
        code:,  //前后端自己定义的 请求状态  0 1 
        msg:"", // 请求 结果的 字符串
        data:  //后端返回的数据
      }



  开发环境
    开发时候环境
    服务 部署在本地的
      localhost:8000/a?uerName=xxx
  生产环境
    部署到服务器之后  正式上线了
      http://www.xcxc.com/a?userName=xxx

    创建一个实例
    做一些 初始化的配置
    let http = axios.create({
      baseURL:'localhost',
      timeout:10000, //定义 请求的超时时间
      headers:{
        "content-type":"apllication/json"
      }
    });

    http.get('/a');   http.get("localhost/a");


    如何不用实例 方式 做axios的初始化 （默认值） 还要其他方式做
    axios.get

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    
    axios 拦截器
      // 添加一个请求的拦截器
      axios.interceptors.request.use(function (config) {
          // 在数据发送之前，做这里写一些事情
          return config;
        }, function (error) {
          //出错了
          return Promise.reject(error);
        });

      // 添加一个响应的拦截
      axios.interceptors.response.use(function (response) {
          // 响应之前 
          return response;
        }, function (error) {
          return Promise.reject(error);
        });

token 密钥

前后端分离架构中
后端写好的接口，需要 密钥访问（安全），
token流程：
  1，前端 在用户登录时 将用户信息 发送后 后台的登录 接口
  如果是当前用户，密码正确，后端 返回token，
  2，前端拿到token，保存（cookie localStorage）
  3，在其他页面中 获取 保存的token 放在请求头中（应该写在axios的拦截器中）
  4，有些接口 的token 安全性要求很高，token 还有过期时间，如果过期，前端会自动跳转到登录页，重新获取token，重新 存储


  let http = axios.create({
    baseURL,
    timeout
  });
  axios.interceptors.request.use(function (config) {
          // 在数据发送之前，做这里写一些事情
          //token处理  authToken   accessToken
          let token = localStorage.getItem("token");
          token && config.headers['accessToken'] = token; 
          return config;
    }, function (error) {
          //出错了
          return Promise.reject(error);
  });

      // 添加一个响应的拦截
  axios.interceptors.response.use(function (response) {
          // 响应之前 
          return response;
  }, function (error) {
          return Promise.reject(error);
  });

axios 常见的问题 ? 搜怎么解决 qs.parse() qs.stringify()

 axios post请求 后端 接收不到你传的参数

 post请求中 请求头，数据格式 默认是 application/json
  服务器中默认处理 前端传的数据格式是 application/x-www-form-urlencoded

vue中的路由

什么是路由：访问 不同的地址 显示不同的内容
前后端分离的 SPA应用 single page application 单页面应用
（整个项目只有一个html文件）
spa优劣：
优势： 加载一次，切换速度快
劣势： 不利于seo(搜索引擎优化)

路由组件：
不是在 全局上注册（Vue.component），也不是在局部上注册，而是通过路由注册
某个路由地址 对应某个 组件

  1,声明 路由组件

    let Home = {
      template:`
        <div>
          我是首页
        </div>
      `
    };
    let News = {
      template:`
        <div>
          我是新闻页
        </div>
      `
    };

  2, 定义路由规则
   const routes = [
     {
       path:"/home",
       component:Home
     },
     {
       path:"/news",
       component:News
     }
   ];
  3,初始化 路由对象
   const router = new VueRouter({
     routes
   });
  4,挂载到vue 实例上

  new Vue({
    el:"xxx",
    router
  });

  vueRouter提供了两个组件
  router-view  组件 是 路由组件的出口（写在哪里，路由对应的组件就在哪里显示）
  router-link 
      to="跳转的地址"  
      tag="button"  渲染的元素

动态路由

可以让 路由 地址变成动态的 一般用于 列表进入详情 传id

定义路由时

  routes = [
    {
      path:"/new/:id/:id2",
      component:News
    }
  ]

  路由地址  /news/1/5

  任意组件的实例上 $route 对象
  this.$route.params.id
  this.$route.params.id2 

嵌套 路由

1，子路由出口 写在 对应 父的路由组件中
2，路由的配置 要写在 对于 父 路由组件的配置 中加一个children属性

命名路由

给路由起别名

routes = [
  {
    name:"home",
    path:"/home",
    component:Home
  },
  {
    name:"news",
    path:"/news",
    component:News
  }
]

跳转路由的时候，就可以 不通过 path，指定别名
<router-link to="字符串">  只能写path

<router-link :to="{name:名字}">
<router-link :to="{path:路由}">
传参：
  <router-link :to="{name:名字,params:{id:123}}">
注意：
  { path:"xxx",params:{} } 不能传参 是无效的
  命名路由传参（name+params）:
    优点：隐式（参数不在地址上显示）
    缺点：页面刷新 数据丢失

另一种传参方式
  <router-link :to="{path:路径,query:{id:123}}">


  获取  $route.query.id
  好处：不会丢失数据
  缺点：放在地址栏上

总结 vue路由中路由跳转传参的方式

• 动态路由
• 命名路由+params name+params
• path+query
  不建议 name+query

编程式导航

路由操作 不是由router-link完成了，而是在js中 通过 路由提供的方法来操作

router-link 声明式导航
$route 每一个组件都有，对象 保存了 路由 中相关的参数
$router 每一个组件都有 保存了 操作 路由相关的方法
push(); 跳转路由的
参数 同 router-link to属性
1，字符串 直接写path
2，可以是对象
{
name:“new”
}
{
path:"/news"
}
{
name:“news”,
params:{
id:123
}
}
{
path:"/news",
query:{
id:123
}
}

注意： 当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。