vue路由跳转及其ajax请求,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

标签：Vue,home,ajax,跳转,router,path,路由

来源： https://www.cnblogs.com/broue/p/13423434.html