vue-router是如何映射

Vue Router 是通过路由表将 URL 与组件映射起来的。具体来说，1、定义路由规则，2、创建路由实例，3、将路由实例挂载到 Vue 实例上。 这些步骤使得 Vue Router 能够根据用户请求的 URL 动态地加载和渲染相应的 Vue 组件，从而实现单页面应用（SPA）的路由管理。

一、定义路由规则

在 Vue Router 中，路由规则是通过一个数组对象来定义的，每个对象代表一条路由。路由对象通常包含两个主要属性：path 和 component。path 是 URL 的路径，component 是对应的 Vue 组件。以下是一个简单的示例：

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent },
  { path: '/contact', component: ContactComponent }
];

通过这种方式，您可以定义应用程序中所有可能的路径以及每个路径对应的组件。

二、创建路由实例

一旦定义了路由规则，下一步是创建一个 Vue Router 实例，并将这些路由规则传递给它。可以使用 VueRouter 构造函数来创建路由实例，如下所示：

const router = new VueRouter({
  routes // routes: routes 的简写
});

这个实例现在包含了所有的路由规则，并可以用来管理应用程序的路由。

三、将路由实例挂载到 Vue 实例上

最后一步是将创建的路由实例传递给 Vue 实例。这可以通过在创建 Vue 实例时将 router 选项设置为路由实例来实现：

new Vue({
  el: '#app',
  router, // router: router 的简写
  render: h => h(App)
});

这样，Vue Router 就会接管应用程序的路由管理，并根据当前的 URL 动态加载和渲染相应的组件。

四、动态路由和路由嵌套

Vue Router 还支持动态路由和路由嵌套，通过这些功能可以实现更加复杂的路由需求。

1、动态路由：动态路由允许您在 URL 中使用变量。例如，您可以定义一个用户页面，其路径包含用户 ID：

const routes = [
  { path: '/user/:id', component: UserComponent }
];

在 UserComponent 中，您可以通过 this.$route.params.id 访问用户 ID。

2、路由嵌套：路由嵌套允许您在一个组件内部定义子路由。这样可以让应用程序的路由结构更加清晰和模块化。例如：

const routes = [
  {
    path: '/user/:id',
    component: UserComponent,
    children: [
      { path: 'profile', component: UserProfileComponent },
      { path: 'posts', component: UserPostsComponent }
    ]
  }
];

在 UserComponent 中，您可以使用 <router-view> 来渲染子路由的组件。

五、导航守卫

Vue Router 提供了导航守卫功能，允许您在导航发生之前或之后执行一些逻辑。这对于控制访问权限、加载数据等非常有用。

1、全局守卫：可以在创建路由实例时定义全局前置守卫和后置守卫：

router.beforeEach((to, from, next) => {
  // 执行一些逻辑
  next();
});
router.afterEach((to, from) => {
  // 执行一些逻辑
});

2、路由独享守卫：可以在定义路由时为特定路由添加守卫：

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      // 执行一些逻辑
      next();
    }
  }
];

3、组件内守卫：可以在组件内部定义守卫：

export default {
  beforeRouteEnter(to, from, next) {
    // 在路由进入之前执行
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在路由更新之前执行
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在路由离开之前执行
    next();
  }
};

六、路由元信息和懒加载

1、路由元信息：可以在定义路由时添加元信息，用于存储一些自定义数据：

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: { requiresAuth: true }
  }
];

在导航守卫中，可以通过 to.meta 访问这些元信息。

2、懒加载：为了优化性能，可以使用懒加载技术按需加载组件：

const routes = [
  {
    path: '/admin',
    component: () => import('./components/AdminComponent.vue')
  }
];

这种方式确保只有在访问特定路由时，才会加载相应的组件，从而减少初始加载时间。

七、总结和建议

通过定义路由规则、创建路由实例并将其挂载到 Vue 实例上，Vue Router 能够有效地管理单页面应用的路由。动态路由、路由嵌套、导航守卫等功能进一步增强了其灵活性和可扩展性。建议在实际项目中充分利用这些功能，以实现更加高效和模块化的路由管理。此外，使用路由元信息和懒加载技术，可以优化应用性能和用户体验。