Vue3 无痛入门：轻松配置路由，全方位使用指南

Vue3 路由进阶指南：从入门到精通

1️⃣ Vue3，为何如此火爆？

Vue3 是一款革命性的 JavaScript 框架，以其令人惊叹的性能、轻量级、强大的功能和直观的开发体验，迅速征服了前端开发界。它的出现，为单页面应用程序的构建带来了前所未有的便利。

2️⃣ 初识 Vue3 路由

路由是单页面应用程序的核心，负责管理页面之间的无缝切换。在 Vue3 中，路由系统同样至关重要，它提供了构建复杂前端应用的强大工具。

配置一级路由

一级路由定义了应用程序中的主要页面。通过使用 <router-view> 组件作为路由出口，你可以轻松显示与一级路由相对应的组件。

import { createRouter, createWebHistory } from 'vue-router'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

配置二级路由

二级路由进一步细分了应用程序中的页面，让你可以定义更具体的页面内容。同样使用 router-view 组件作为路由出口，可以显示二级路由对应的组件。

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

3️⃣ 项目守卫

项目守卫是保护应用程序免受未经授权访问的利器。它允许你检查用户是否已登录、是否有权限访问特定页面等。

import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'

const requireAuth = (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  if (!isAuthenticated) {
    next('/login')
  } else {
    next()
  }
}

const router = createRouter({
  history: createWebHistory(),
  routes,
  // 全局守卫
  beforeEach: [requireAuth]
})

export default router

4️⃣ 组件使用技巧

使用 setup 组件

setup 组件是 Vue3 中的新特性，它以简洁的方式处理组件的数据、方法和生命周期钩子。

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
})

使用 vuerouter 的组合式 API

vuerouter 的组合式 API 是一组操作路由的函数，用于获取当前路由信息、导航到新页面等。

import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const route = useRoute()
    const router = useRouter()

    return {
      route,
      router
    }
  }
})

5️⃣ 优化 Vue3 路由

使用路由懒加载

路由懒加载可以在需要时才加载路由对应的组件，从而显著减少初始加载时间。

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior: () => ({ top: 0 }),
  // 使用路由懒加载
  components: {
    Home: () => import('./components/Home.vue'),
    About: () => import('./components/About.vue')
  }
})

使用 keep-alive 组件

keep-alive 组件在页面切换时保留组件的状态，从而提高应用程序性能和减少组件重新渲染。

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

6️⃣ 结语

Vue3 路由功能强大且灵活，它为构建复杂单页面应用程序提供了坚实的基础。通过掌握本文中的知识和技巧，你可以轻松驾驭 Vue3 路由，打造出令人惊叹的 web 应用。

常见问题解答：

1️⃣ Vue3 路由和 Vue2 路由有什么区别？

Vue3 路由进行了全面改进，引入了新的特性，如组合式 API、路由懒加载和更强大的导航守卫。

2️⃣ 如何使用动态路由？

使用命名路由或使用路径参数来定义动态路由，然后在组件中使用 useRoute() 钩子访问动态路由参数。

3️⃣ 如何处理 404 错误？

可以使用 NotFound 组件作为全局 404 错误处理程序，或者使用 errorCaptured 钩子来处理错误。

4️⃣ 如何使用路由导航？

使用 router.push() 或 router.replace() 方法在组件中导航到新路由。

5️⃣ 如何集成 Vuex 和 Vue3 路由？

可以使用 Vuex 存储和管理路由状态，并通过组合式 API 和 mapState() 辅助函数访问和更新 Vuex 状态。