Vue Router 的使用（三）

Vue 官方文档：参考官网：​​​​​​​​​​​​Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

 Vue Router 参考：Home | Vue Router (vuejs.org)

---

注意：我是用 vite 的方法创建项目的，有些创建项目方式的 router 使用是有区别的。 

---

十四、导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

1、全局前置守卫

可以使用 router.beforeEach 注册一个全局前置守卫：

router.beforeEach((to,from)=>{
    console.log(to);
    console.log(from);
})

每个守卫方法接收两个参数：

• to: 即将要进入的目标
• from: 当前导航正要离开的路由

 也可以使用 第三个参数 next ，它相当于一个通行证：

router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    next();
})

2、路由独享的守卫

可以直接在路由配置上定义 beforeEnter 守卫，beforeEnter 守卫 只在进入路由时触发：

const routes = [
  { 
    path: '/about', 
    component: About,
    
    beforeEnter:(to,from)=>{
      console.log(to);
      console.log(from);
    } 
  },
]

也可以加一个判断：

const routes = [
  { 
    path: '/about', 
    component: About,

    // 路由独享的守卫
    beforeEnter:(to,from,next)=>{
      console.log(to);
      console.log(from);
      if(123===123){
        next()
      }
    } 
  },
]

3、组件内的守卫

可以在路由组件内直接定义路由导航守卫(传递给路由配置的)

export default {
    data(){
        return{
            age:18
        }
    },
    beforeRouteEnter(to, from,next) {
        console.log(to);
        console.log(from);
        next((vm)=>{
            console.log(vm.age);  //通过next获取data里面的数据
        })
        console.log('路由进入组件之前');
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！通过next的回调函数
    // 因为当守卫执行时，组件实例还没被创建！
    },
    beforeRouteUpdate(to, from) {
        console.log('路由更新组件之前');
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from) {
        console.log('路由离开组件之前');
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    },
}

十五、 路由懒加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})