探寻 Vue.js 路由系统的奥秘：Vue-router 的进阶指南 (二)

2023-09-06 17:01:34

掌握 Vue-router 的高级功能：默认路径、导航守卫和嵌套路由

在当今蓬勃发展的 Web 开发领域，构建单页应用程序 (SPA) 正变得愈发普遍。Vue.js，一个以简洁性和灵活性著称的流行 JavaScript 框架，是构建 SPA 的不二之选。Vue.js 的路由系统 Vue-router 让您能够轻而易举地管理应用程序中的页面导航。

默认路径

Vue-router 中的默认路径是指用户访问应用程序时加载的初始页面。默认情况下，Vue-router 使用根路径（"/") 作为默认路径。然而，您可以通过在创建 Vue-router 实例时使用 index 选项来自定义默认路径：

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ],
  index: '/about'
});

在上面的示例中，/about 已被设置为默认路径。当用户访问应用程序时，将加载 About 组件。

导航守卫

导航守卫是 Vue-router 提供的强大工具，允许您在用户导航到不同页面时拦截和处理导航。这在执行身份验证、权限检查和数据预取等任务时非常有用。

有三种类型的导航守卫：

beforeEach：在导航开始前调用，可以取消导航或修改目标路由。
beforeResolve：在导航解析后调用，不能取消导航，但可以修改目标路由。
afterEach：在导航完成后调用，不能修改目标路由，但可以执行其他操作，如记录导航或显示加载指示器。

要使用导航守卫，请使用 router.beforeEach、router.beforeResolve 或 router.afterEach 方法：

router.beforeEach((to, from, next) => {
  // 在这里执行身份验证或权限检查
  if (isAuthenticated) {
    next();
  } else {
    next('/');
  }
});

在上面的示例中，beforeEach 守卫将检查用户是否已通过身份验证。如果不是，将取消导航并将其重定向到根路径（"/")。

嵌套路由

嵌套路由允许您在应用程序中创建父子路由层次结构。这对于组织大型应用程序和创建多级导航菜单非常有用。

要创建嵌套路由，请使用 children 数组：

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        { path: 'child1', component: Child1 },
        { path: 'child2', component: Child2 }
      ]
    }
  ]
});