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(...)

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页