Vue.js 的路由管理主要使用 **Vue Router** 库。Vue Router 是 Vue.js 的官方路由管理器，它允许开发者在不重新加载整个页面的情况下，通过 URL 的变化来切换不同的视图组件，从而实现单页面应用（SPA）中的页面导航和组件渲染。 ### Vue Router 的主要功能特点包括： 1. **声明式路由映射**：Vue Router 允许你通过简单的配置来定义路由和组件之间的关系，使得路由管理更加直观和易于维护。 2. **嵌套路由**：对于需要多层布局的应用，Vue Router 提供了嵌套路由的功能，允许你在一个主视图内嵌套多个子视图。 3. **模块化、组件化的路由配置**：路由配置是模块化和组件化的，这有助于管理大型应用中的路由，使得代码更加清晰和易于管理。 4. **细粒度导航控制**：Vue Router 提供了一系列的导航钩子函数，如 `beforeEach` 和 `afterEach`，这些函数可以在路由改变前后执行，允许你进行更细粒度的导航控制，如权限检查、数据预加载等。 5. **链接活动类**：当用户导航到一个路由时，Vue Router 可以自动为对应的链接元素添加 "active" CSS 类，从而方便地高亮当前活动的路由链接。 6. **支持历史模式和哈希模式**：Vue Router 支持两种模式来管理浏览器的历史记录。HTML5 历史模式使用 `pushState` API 来管理浏览器历史，而哈希模式则使用 URL 的哈希部分来模拟页面跳转。 ### 安装和使用 Vue Router 1. **安装**：你可以通过 npm 或 yarn 来安装 Vue Router。 ```bash npm install vue-router # 或者 yarn add vue-router ``` 2. **配置**：在 Vue 项目中，你需要在入口文件（如 `main.js` 或 `app.js`）中引入并使用 Vue Router。然后，你需要创建一个路由实例，并定义路由规则，最后将这个路由实例传递给 Vue 实例。 3. **使用**：在 Vue 组件中，你可以使用 `` 组件来创建导航链接，使用 `` 组件来显示当前路由对应的组件。 ### 示例 下面是一个简单的 Vue Router 配置示例： ```javascript // 引入 Vue 和 VueRouter import Vue from 'vue'; import VueRouter from 'vue-router'; // 引入组件 import Home from './views/Home.vue'; import About from './views/About.vue'; // 告诉 Vue 使用 VueRouter Vue.use(VueRouter); // 定义路由 // 每个路由应该映射一个组件。 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; // 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }); // 创建和挂载根实例 new Vue({ router, render: h => h(App), }).$mount('#app'); ``` 在 Vue 组件的模板中，你可以这样使用 `` 和 ``： ```html ``` 这样，当用户点击 "Home" 或 "About" 链接时，`` 组件就会渲染对应的组件内容。