从头到尾理解Vue Router的实现原理

2024-01-25 05:46:01

安装Vue Router

当您在项目中引入Vue Router时，您需要调用Vue.use(Router)方法。这将默认调用当前返回VueRouter对象的install方法，并将路由实例对象挂载到Vue上。所有组件都可以通过this._routerRoot._router拿到用户传递进来的路由实例对象。

创建路由

接下来，您需要创建路由。您可以使用createRouter方法来创建路由实例，并传入一个配置对象。在这个配置对象中，您可以定义路由规则、导航守卫等。

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

在上面的例子中，我们创建了两个路由：一个是根路由（/），另一个是关于页面路由(/about)。当用户访问根路由时，将显示Home组件；当用户访问关于页面路由时，将显示About组件。

导航守卫

导航守卫是Vue Router提供的一个强大功能，它允许您在导航发生之前或之后执行一些操作。您可以使用beforeEach、afterEach、beforeResolve和beforeEnter等导航守卫来实现各种各样的功能，例如权限控制、数据预取、页面过渡等。

router.beforeEach((to, from, next) => {
  // 在导航发生之前执行
});

router.afterEach((to, from) => {
  // 在导航发生之后执行
});

router.beforeResolve((to, from, next) => {
  // 在导航被解析之前执行
});

router.beforeEnter((to, from, next) => {
  // 在导航进入组件之前执行
});