当前位置：首页 > article >正文

Vue.js 什么是 Vue Router

article 2025/1/22 8:51:33

Vue.js 什么是 Vue Router

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

Vue Router 的功能

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

Vue Router 的基本使用

安装 Vue Router：
```
npm install vue-router
```

定义路由：

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

在 Vue 应用中使用路由器：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

在模板中使用 RouterLink 和 RouterView：

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