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