Vue中的路由以及ajax

Vue请求ajax之fetch

使用方法：

fetch(url,{
  headers:{
   "token":localStorage.getItem('token'),
   "content-type":"apllication-xxx-urlencoded"
  
  },
  methods:"GET/POST",
  data:{
   
  }
 }).then(function(res){
  return res.json()  //text() arrayBuffer() blob() formData()
 }).then(res=>{
  //res 才是请求的结果 格式化之后（什么格式取决于 第一个 then 返回的处理方法）
 })

fetch 兼容性差：使用promise 不支持 ie11及以下的 且，在vue react等脚手架中 配置babel es6转es5，也无法转换promise
  使用babel-polyfill 插件来解决
Vue 如何兼容IE（IE9及以上），  使用babel-polyfill 插件来解决

解决fetch 兼容性问题？
 1，使用babel-polyfill
 2,直接使用 git https://github.com/github/fetch
  基于原生的fetch 封装的，当有的浏览器不支持fetch时，转换成普通的xhr对象（内部集成了babel-polyfill）

Vue的axiso ajax库

axios 是一个 封装好的 第三方ajax请求的库
    特点：支持restfulapi    支持promise 解决回到地狱    支持ajax请求拦截

get请求：
    axios.get('url?params1=v&params2=值2').then().catch()
    axios.get(url,{
        params:{
            key1:v1,
            key2:v2
        }
    })

post请求：
    axios.post(url,{
        key1:v1,
        key2:v2
    }).then().catch()

Vue中的路由

单页面应用：single page application     整个项目只有一个html
优点：
    页面性能较高
    页面间切换速度很快

缺点：
    不利于seo （搜索引擎优化）
    爬虫 爬取页面关键字
    单页面应用一般都是基于webpack进行构建的，所以资源，都是在js中，爬虫不认识js

vue路由：  一个地址 对应 一个组件

Vue中的嵌套路由

1,在以及路由 路由规则中 routes 中 定义 children属性（[]）;在children属性中，定义该路由的子路由 规则（子路由路径 最好加上 父路由路径作为前缀）
2，在 一级路由 对应的 组件  中 设置 router-view 作为二级路由的出口
3，设置 一级路由中 默认显示某个二级路由
                     {
                        path:"/news",
                        redirect:"/news/nativeNews"
                    },
                    {
                        path:"",
                        component:NativeNews
                    },

Vue中的命名路由

定义路由规则时，可以给当前 路由起一个名字  （定义一个name属性）
        const routes = [
            {
                path:"/",
                redirect:"/home"
            },
            {
                path:"/home",
                name:"home",
                component:Home
            },
            {
                path:"/news",
                name:"news",
                component:News
            }
        ];
    router-link
        to属性值
            字符串
                router-link to="/news" 通过path跳转
            对象
                router-link :to="{name:'home'}" 可以通过名字跳转
                router-link :to="{path:'/home'}" 可以通过path跳转

            传参  params传参
            router-link :to="{name:'home',params:{id:111}}"
            在目标路由中  this.$route.params.id获取
        注意：
            1，params传参 是 隐式（不会在地址栏显示），刷新后 参数会丢失
            2，params传参 必须 和 name跳转路由 一起使用，和path 不起效果

Vue编程式导航

声明式导航 ： 在模板（html中），通过标签（组件） 跳转  router-link跳转
编程式导航 ： 在js中通过api跳转
vueRouter 给 Vue的原型中 还灌入一个对象  $router，保存了 操作 路由的 api
push
this.$router.push()  跳转路由
push参数 同 router-link to属性的值（一毛一样）
 字符串
               this.$router.push("/news") 通过path跳转
            对象
                 this.$router.push({name:'home'}) 可以通过名字跳转
                 this.$router.push({path:'/home'}) 可以通过path跳转

            传参  params传参
             this.$router.push({name:'home',params:{id:111}})
            在目标路由中  this.$route.params.id获取
 this.$router.replace() 参数 同上
 与push不同的是？
    跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。  （返回上一步 时，之前 不存在了，到上两步）
this.$router.go(n)
        go(0)  刷新
        go(1) 前进一步
        go(-1) 返回上一步

Vue中query传参

router-link
    :to="{path:'/news',query:{id:1,id2:2}}"
this.$router.push({
    path:'/news',
    query:{
        id:1,
        id2:2
    }
})

获取： this.$route.query.xxx

Vue中的导航守卫

全局守卫
    全局前置守卫
        router.beforeEach((to,from,next)=>{

        });
    全局后置守卫
        router.afterEach((to,from)=>{

        })
路由独享
    只针对某个路由
    routes:[
        {
            path:"/home",
            component:Home,
            beforeEnter:(to,from,next)=>{

            }
        }
    ]
组件内部
    beforeRouteEnter
    beforeRouteUpdate  新增 主要用于 动态路由
    beforeRouteLeave