Vue3（撩课学院）笔记08-路由前置守卫，路由前置守卫设置元信息，路由后置守卫，keep-alive,一个路由tabbar案例，promise基本使用，链式调用，优化

1、路由全局前置守卫

对符合条件的路由路径进行判断并决定是否放心
Router/index.js

//引入路由
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './../components/Home.vue'
import Mine from './../components/Mine.vue'
import News from './../components/News.vue'
import MineMsg from './../components/MineMsg.vue'
import MineOrder from './../components/MineOrder.vue'
import Circle from './../components/circle.vue'
//创建路由对象数据
const routes=[
  {path:'/',redirect:'/home'},
  {path:'/home',component:Home},
  {
    path:'/mine',
    component:Mine,
    children:[
      {path:'/mine',redirect:'/mine/msg'},
      {path:'order',component:MineOrder},
      {path:'msg',component:MineMsg}
    ]
  },
  {path:'/news/:id',component:News},
  {path:'/circle',component:Circle}
]

//创建路由
const router=createRouter(
  {
    history:createWebHashHistory(),
    routes
  }
)

//全局路由前置守卫
//三个参数，从哪里来，到哪里去，及next的回调函数
router.beforeEach((to,from,next)=>{
  console.log('从哪里来：',from)
  console.log('到哪里去：',to)
  //放行
  next()
})

//导出路由对象
export  default router

2、路由全局前置守卫设置元信息

设置路由的元信息，给页面添加title属性

//引入路由
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './../components/Home.vue'
import Mine from './../components/Mine.vue'
import News from './../components/News.vue'
import MineMsg from './../components/MineMsg.vue'
import MineOrder from './../components/MineOrder.vue'
import Circle from './../components/circle.vue'
//创建路由对象数据
const routes=[
  //重定向
  {path:'/',redirect:'/home'},
  //设置元信息
  {path:'/home',component:Home,meta:{title: '首页'}},
  {
    path:'/mine',
    component:Mine,
    children:[
      {path:'/mine',redirect:'/mine/msg'},
      {path:'order',component:MineOrder},
      {path:'msg',component:MineMsg}
    ],
    meta:{title: '我的'}

  },
  {path:'/news/:id',component:News,meta:{title: '新闻'}},
  {path:'/circle',component:Circle,meta:{title: '圈子'}}
]

//创建路由
const router=createRouter(
  {
    history:createWebHashHistory(),
    routes
  }
)

//全局路由前置守卫
//三个参数，从哪里来，到哪里去，及next的回调函数
router.beforeEach((to,from,next)=>{
  //设置页面的title
  document.title=to.meta.title
  //放行
  next()
})

//导出路由对象
export  default router

3、路由全局后置守卫（后置钩子）

听了个寂寞，大致是说组件内部可以单独引入路由守卫

4、keep-alive

vue2内使用keep-alive包裹的内容可以一直缓存
vue3则使用以下方式

<router-view v-slot="{{component}}">
      <keep-alive>
        <component :is="component"
      </keep-alive>
    </router-view>

5、一个路由tabbar案例

案例连接

6、Promise-基本使用

const fs=require('fs')
const path=require('path')

//创建一个promise
let p1=new Promise((resolve,reject)=>{
  fs.readFile(path.join(__dirname,'data/a.txt'),(err,data)=>{
    if (err){
      reject(err)
    }
    resolve(data)
  })
})

p1.then((data)=>{
  console.log(data.toString())
}).catch((err)=>{
  console.log(err)

})

7、Promise-链式调用

const fs=require('fs')
const path=require('path')

//创建一个promise
const p1=new Promise((resolve,reject)=>{
  fs.readFile(path.join(__dirname,'data/a.txt'),(err,data)=>{
    if (err){
      reject(err)
    }
    resolve(data)
  })
}).then((data)=>{
  console.log(data.toString())
  return new Promise((resolve,reject)=>{
    fs.readFile(path.join(__dirname,'data/b.txt'),(err,data)=>{
      if (err){
        reject(err)
      }
      resolve(data.toString())
    })
  })
}).then((data)=>{
  console.log(data.toString())
  return new Promise((resolve,reject)=>{
    fs.readFile(path.join(__dirname,'data/c.txt'),(err,data)=>{
      if (err){
        reject(err)
      }
      resolve(data)
    })
  })
}).then((data)=>{
  console.log(data.toString())
}).catch((err)=>{
  reject(err)
})

8、Promise-优化

const fs=require('fs')
const path=require('path')

//抽离出一个读文件的方法
let readFile=(...args)=>{
  return new Promise((resolve,reject)=>{
    fs.readFile(path.join(...args),(err,data)=>{
      if (err){
        reject(err)
      }
      resolve(data)
    })
  })
}

readFile(path.join(__dirname,'data/a.txt')).then((data)=>{
  console.log(data.toString())
  return readFile(path.join(__dirname,'data/b.txt'))
}).then((data)=>{
  console.log(data.toString())
  return readFile(path.join(__dirname,'data/c.txt'))
}).then((data)=>{
  console.log(data.toString())
})

9、Promise-all确保异步执行

const fs=require('fs')
const path=require('path')

//抽离出一个读文件的方法
let readFile=(...args)=>{
  return new Promise((resolve,reject)=>{
    fs.readFile(path.join(...args),(err,data)=>{
      if (err){
        reject(err)
      }
      resolve(data)
    })
  })
}
Promise.all([
  readFile(path.join(__dirname,'data/a.txt')),
  readFile(path.join(__dirname,'data/b.txt')),
  readFile(path.join(__dirname,'data/c.txt')),
]).then(([data1,data2,data3])=>{
  console.log(data1.toString())
  console.log(data2.toString())
  console.log(data3.toString())
}).catch((err)=>{
  console.log(err)
})