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=[