VIP26/day32/project/src/router/index.js

// 引入第三方库
import Vue from 'vue'
// vue-router 路由
// npm install vue-router@3
// @3 =>vue2
// @4 => vue3
import VueRouter from 'vue-router'
import home from '../views/home.vue'
// 引入页面
import Vase from '../views/List.vue'
import Collect from '../components/collect.vue'
import Add from '../components/add.vue'
// 实例化
Vue.use(VueRouter)

// 路由守卫
// 1.全局路由守卫
// beforeEach 前置路由守卫
// afterEach  后置路由守卫
// 2.独享路由守卫：守卫哪写在哪
// beforeEnter
// 3.组建内的路由守卫 =>components/vase1.vue
// 进入守卫 beforeRouteEnter 
// 离开守卫 beforeRouteLeave
const routes = [
  {
    path:'/',
    name: 'home',
    component: home   
  },
  {
    path:'/home',
    name: 'home',
    component: home,
    // 路由重定向 redirect
    redirect:'/',
    children:[
      {
        path:'vase1',
        component:()=>import("../components/vase1.vue")
      },
      {
        path:'vase2',
        component:()=>import("../components/vase2.vue"),
        meta:{title:"第二页"},
        // beforeEnter: (to, from, next) => {
        //   // ...
        //   console.log("开始独享")
        //   if(localStorage.getItem("bb")==="222") {
        //     next();
        //   } else {
        //     alert("人员信息不存在")
        //   }
        // }
      },
    ]
  },
  // 1.先配置路由的路径：path 2.起名字 3.存放路径页面
  {
    path:"/list",
    // name: 'list',
    component: Vase,
    meta:{isAuth:true,title:'列表页'},
    // 二级路由/多级路由
    children:[
      {
        // params传参:路径/:xxx/:xxx/:xxx
        path:'collect/:name/:age',
        name:"ANew",
        component: Collect
      },
      {
        path:'add',
        component: Add
      }
    ]
  },
  {
    path: '/new',
    // 路由的懒加载
    component:()=>import("../views/New.vue"),
    meta:{title:"新页面"}
  }
  // {
  //   path:'/new',
  //   component:() => import(/* webpackChunkName: "new" */"../views/New.vue")
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

// 全局中前置路由守卫
router.beforeEach((to,from,next)=>{
  // 1.to => 进入的目标对象
  // 2.from => 离开的目标对象
  // 3.next => 下一步所执行的内容
  if(to.meta.isAuth) {
    console.log("进入1")
    if(localStorage.getItem("aa")==="111") {
      next()
    } else {
      alert("当前用户未登录")
    }
  } else {
    next()
  }
})

// 全局中后置路由守卫
router.afterEach((to,from,next)=>{
  console.log("进入2");
  document.title = to.meta.title || '路由守卫' 

})