Vue Router 简介 🌐

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用（SPA）的导航系统。它通过定义路由规则，将 URL 路径与页面组件动态绑定，实现无缝的页面切换体验。

核心概念 🔗

• 路由配置
  通过 createRouter 和 createWebHistory 定义路由表，例如：

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

  

• 动态路由
  使用 :param 匹配动态段，如 /user/:id 可获取用户 ID：

  { path: '/user/:id', component: UserProfile }
  

  

• 嵌套路由
  通过 children 属性实现嵌套结构，例如：

  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: 'profile', component: Profile }
    ]
  }
  

  

快速上手 🚀

1. 安装依赖

   npm install vue-router@4
   

   

2. 创建路由实例

   import { createRouter, createWebHistory } from 'vue-router'
   const router = createRouter({
     history: createWebHistory(),
     routes: [...]
   })
   

3. 挂载到 Vue 应用

   const app = createApp(App)
   app.use(router)
   app.mount('#app')
   

扩展阅读 📚

如需深入了解，可访问Vue Router 官方文档 或 Vue 3 入门教程。