路由守卫

1.作用：对路由进行权限控制 2.分类：全局守卫、独享守卫、组件内守卫 3.next()函数为放行函数，next(false)表示路由跳转时强制返回当前路由（即跳转前的路由）

前置配置

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {//一路径对应一组件
 // 路由取名
            name: "about",
            path: '/About',
            component: About
        },
        {
            name: "home",
            path: '/Home',
            component: Home,
            children: [//表示二级路由
                {
                    name: "news",
                    path: 'News',
                    component: News,
 // meta为路由元信息，可以在该属性里自定义属性
                    meta: { isAuto: true }
                },
                {//二级路由地址前面不能加/ 
                    name: "message",
                    path: 'Message',
                    component: Message,
                    children: [
                        {
                            name: 'detail',
 // path:'Detail',
                            path: 'Detail/:id/:title',//其中后面两个是占位符，是为了辨别params参数
                            component: Detail,
 // props的第一种写法，对象形式，该对象中的所有key-value都会以props的形式传给detail组件，用的比较少
 // props:{a:1,b:"200"}
 // props的第二种写法，布尔值形式，若props为true则会把该路由组件收到的所有params参数都以props方式传给detail组件
 // props:true 
 // props的第三种写法，函数形式，会把该路由组件收到的所有params或query参数都以props方式传给detail组件
                            props($route) {
                                return {
                                    id: $route.params.id, title: $route.params.title
                                }
                            }
 // props({ query: { id, title } }) {//第三种写法的连续解构赋值写法
 //     return {
 //         id, title
 //     }
 // }
                        }
                    ]
                },

            ]
        },
    ]
})

全局路由守卫（beforeEach，afterEach）

//全局前置路由守卫，在初始化和路由切换之前调用该函数
router.beforeEach((to, from, next) => {//next是一个函数调用它表示允许跳转
 console.log(to, from)//前往哪个路由，从哪个路由
 if (to.meta.isAuto) {//判断是否有isAuto属性用于鉴权
 if (localStorage.getItem('name') === "张") { next() } else { alert('无权限观看') }
    } else { next() }
})
//全局后置路由守卫 
router.afterEach((to, from) => {//由于是切换后调用该函数，所以相比前置路由它没有next函数
 console.log(to, from) 
 document.title = to.name })
export default router

独享路由守卫（beforeEnter，没有后置）

以news路由为例

{//语法和前置全局一致，区别只是对所在路由进行了限制
    name: "news",
    path: 'News',
    component: News,
 // meta为路由元信息，可以在该属性里自定义属性
    meta: { isAuto: true }，
    beforeEnter:(to, from, next) => {//next是一个函数调用它表示允许跳转
        console.log(to, from)//前往哪个路由，从哪个路由
 if (to.meta.isAuto) {//判断是否有isAuto属性用于鉴权
 if (localStorage.getItem('name') === "张") { next() } else { alert('无权限观看') }
         } else { next() }
}                  
                },

组件内路由 （beforeRouterEnter,beforeRouterleave）

区别于全局路由，没有前置和后置之分，一次操作只可能触发进入或离开 最近新增了第三个路由守卫beforeRouterUpdata

beforeRouteEnter (to, from, next) {//通过路由规则进入该组件时被调用
 // ...
  },
  beforeRouteLeave (to, from, next) {//通过路由规则离开该组件时被调用
 // ...
  }