Vue.js 什么是 Vue Router

Vue Router 是 Vue.js 的官方路由管理器，专为构建单页应用（SPA）而设计。它与 Vue.js 核心深度集成，使开发者能够轻松地在应用中管理和导航不同的视图。

Vue Router 的功能

• 嵌套路由映射：支持在路由配置中嵌套子路由，方便构建复杂的界面结构。
• 动态路由匹配：允许在路由路径中使用参数，从而匹配多个路由。
• 模块化、基于组件的路由配置：每个路由都映射到一个组件，清晰直观。
• 路由参数、查询、通配符：支持多种方式传递参数，满足不同的需求。
• 过渡效果：与 Vue.js 的过渡系统集成，为路由视图切换提供过渡效果。
• 导航守卫：提供钩子函数，在路由进入或离开时执行特定逻辑。
• 自动激活的 CSS 类名：为当前激活的路由添加特定的 CSS 类，方便样式定制。
• 多种历史记录模式：支持 HTML5 history 模式或 hash 模式，灵活选择。
• 可定制的滚动行为：在路由切换时控制页面的滚动行为。
• 正确的 URL 编码：确保应用中的 URL 编码符合标准。

Vue Router 的基本使用

1. 安装 Vue Router：

   npm install vue-router
   

2. 定义路由：

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from './components/Home.vue'
   import About from './components/About.vue'
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About },
   ]
   
   const router = createRouter({
     history: createWebHistory(),
     routes,
   })
   
   export default router
   

3. 在 Vue 应用中使用路由器：

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   
   const app = createApp(App)
   app.use(router)
   app.mount('#app')
   

4. 在模板中使用 RouterLink 和 RouterView：

   <template>
     <div>
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
       </nav>
       <RouterView />
     </div>
   </template>
   

总结

通过使用 Vue Router，开发者可以轻松地管理应用中的路由，构建复杂的单页应用。