vue导航守卫🚘🚚🚛

import Vue from 'vue'
import Router from 'vue-router'
// import Home from '../components/home.vue'
// import About from "../components/About.vue"
// import Usr from "../components/usr.vue"
const Home = () => import("../components/Home.vue")
const About = () => import("../components/About.vue")
const Usr = () => import("../components/usr.vue")
const News = () => import("../components/News.vue")
const Message = () => import("../components/Message.vue")
const Profile = () => import("../components/Profile.vue")
Vue.use(Router)
const router = new Router({
  routes: \[
    {
     path:'',
     redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      meta:{
          title:"主页"
      },
      children:\[ {
        path:'',
        redirect:'news'
      },
        {
          path:"news",
          component:News
        },{
          path:'message',
          component:Message
        }
      \]
    },{
      path:"/about",
      component:About,
      meta:{
        title:"关于"
      },
      //在进入此路由时触发
      beforeEnter:((to,from,next) => {

        //调用next() 执行下一步
        next()
        })
    },{
      path:"/usr/:usrID",
      component:Usr,
      meta:{
        title:"用户"
      }
    },{
    path:'/profile',
      component:Profile,
      meta:{
        title:"档案"
      }
    }
  \],
  mode:'history',
  linkActiveClass:"active"
})
//前置回调，前置钩子
router.beforeEach((to,from,next)=>{
  //从from 跳转到to
  document.title=to.matched\[0\].meta.title //由于第一个组件是路由嵌套，用此方法能取到title，不是路由嵌套可用to.meta.title
  //必须调用next否则不执行下一步
  next()
})
//后置钩子（hook） 不必调用next()
router.afterEach((to,from) => {
  console.log("aaa");
});

export  default router;