详解vue-router 初始化时做了什么

Vue Router 是 Vue.js 官方的路由管理器，它能够实现单页面应用程序（SPA）中的路由效果。Vue Router 初始化时做了以下事情：

1. 创建路由实例

在 Vue 应用中使用 Vue Router，我们需要创建一个路由实例来管理路由。在创建路由实例时，Vue Router 会进行一系列的初始化操作，包括初始化路由表、路由守卫等。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // mode: 'history', // 路由模式
  routes: [] // 路由表
})

在上述代码中，我们通过 import 引入了 Vue 和 Vue Router，并在 Vue 中使用了 Vue Router 插件。接着，我们通过 new VueRouter() 创建了一个路由实例，并传入了路由表。

1. 注册路由表

路由表是 Vue Router 的核心部分之一，它定义了应用程序中的所有路由。在创建路由实例后，我们需要将路由表注册到应用程序中。

import App from './App.vue'

new Vue({
  el: '#app',
  router, // 注入路由实例到 Vue 选项中
  render: h => h(App)
})

在上述代码中，我们通过 Vue 的 new 关键字创建一个 Vue 实例，并将前面创建的路由实例注入到 Vue 实例的选项中，以便在整个应用程序中可用。接着，我们通过 render 渲染 App 组件，从而启动整个应用程序。

1. 管理路由状态

当用户在应用程序中切换路由时，Vue Router 会管理路由状态并保证应用程序的状态与 URL 同步。

在 Vue Router 中，我们可以通过 $route 对象来访问当前路由信息。

export default {
  name: 'MyComponent',
  methods: {
    goToAbout() {
      this.$router.push({ path: '/about' })
    }
  }
}

在上述代码中，我们在 MyComponent 组件内使用 $router.push() 方法向路由栈中添加一个新的路由记录。这个方法的参数必须是一个对象，其中的 path 属性表示要跳转的路由路径。

1. 路由守卫

Vue Router 还提供了多个路由守卫，它们可以在路由导航中的不同生命周期钩子中执行相应的操作。常用的路由守卫包括 beforeEach、afterEach、beforeRouteEnter、beforeRouteLeave 等。

下面是一个在路由跳转之前进行身份验证的路由守卫示例：

const router = new VueRouter({
  routes: [{/* ... */}]
})

router.beforeEach((to, from, next) => {
  // 执行身份验证逻辑
  const isAuthenticated = /* ... */

  if (isAuthenticated) {
    next()
  } else {
    next('/login') // 跳转到登录页
  }
})

在上述代码中，我们使用 router.beforeEach() 方法注册了一个全局的路由守卫，在跳转路由之前进行身份验证。其中，to 参数表示目标路由对象，from 参数表示当前路由对象，next 方法在验证完成后必须被调用，以便路由跳转继续进行。

总结：在 Vue Router 初始化时，它会创建路由实例、注册路由表、管理路由状态以及提供路由守卫等功能。这些功能一起工作，让我们能够创建复杂的单页面应用程序，并实现优秀的用户体验。