vue-router参数传递、全局导航守卫、vue-router-keep-alive、Promise的使用

vue-router参数传递

一.传递参数的方式

1.两种类型（params、query）

(1) params：

配置路由的格式：/router/:id

传递的方式：在path后跟上对应的值

传递后形成的路径：/router/123, /router/abc
（2）query:

配置路由的格式：/router

传递的方式：query的key作为传递的方式

传递后形成的路径：/router?id=123, /router?id= abc

 <router-link :to="{path:'/profile',query: {name:'why', age:18,height:1.88}}" tag="button" replace active-class="active">档案</router-link>

二、全局导航守卫

1.导航守卫:

(1)前置守卫

router.beforeEach((to, from,next)=>{
console.log('++++');
next();
})

（2）后置守卫

router.afterEach((to, from)=>{
console.log('---');
})

三、vue-router-keep-alive及其他问题

1.vue-router-keep-alive

1.生命周期函数（created mounted updated destory）

2.keep-alice->activated/deactivated

3.首页 中使用path记录离开时的路径

4.exclude中尽量不要加空格

<router-link to="/home">首页</router-link>
<router-link@click="/about">关于</router-link>
<button @click="userClick">用户</button>
<button @click="userFile">文档</button>
<keep-alive exclude="file,User">
<router-view>
</keep-alive>

四、Promise的使用

异步编程的一种解决方案
1.异步操作时，使用promise对异步操作进行封装
2.new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）
3.在执行传入的回调函数时，会传入两个参数，resolve,reject，本身就是函数

//使用setTimeout
setTimeout(() =>{
 console.log('2222');
 },1000)

// 参数 ->函数（resolve,reject）

new Promise((resolve, reject) =>{
    setTimeout(() =>{
  console.log('test001');
    },2000)

})

new Promise((resolve,reject) =>{
settimeout((data)=>{
resolve(data)},1000)}.then((data)=>{
}).then((data) =>{
//回调
})).catch((err)=>{
})

promise的三种状态
三种状态：pending：等待状态，fulfill：满足状态，reject 拒绝状态
pending：等待网络的请求，或者定时器没有时间
fulfill：当主动回调resolve时，回调then()
reject ：拒绝状态，主动回调reject时，回调.catch()

promise的链式调用
（1）promise.resolve()：将数据包装成Promise对象，并且在内部回调resolve()函数

（2）Prromise.reject():将数据包装成Promise对象，并且在内部回调reject()函数

//链式调用的代码
new promise((resolve,reject) =>{
setTimeout(function(){
resolve('test001')
},1000)
}).then(data => {
console.log(data);
return Promise.resolve(data + '111');
}).then(data =>{
console.log(data);
return Promise.resolve(data + '222')
}).then(data => {
console.log(data);
return Promise.reject(data + '333');
})

如何判断两个请求的结果都拿到

let isResult1 = false;
let isResult2 = false;
//请求一
$ajax({
url:'',
success:function(){
console.log('结果1');
isResult1 = true
handleResult()
}
})
//请求二
$ajax({
url:'',
success:function(){
console.log('结果2')
isResult2 = true;
handleResult()
}
})

function handleResult(){
if(isResult1 && isResult2){
//判断是否改变，是否两个都被请求
}
}

promise.all(）的用法

promise.all([
new Promise((resolve,reject) =>{
$ajax({
url:'',
success:function(data){
resolve(data);
}
     })
}),
new Promise((resolve,reject) =>{
$ajax({
url:'',
success:function(data){
resolve(data)
}
    })
 })
]).then(results =>{
console.log(result);
})