Vue Router 入门指南：构建你的第一个单页应用

Vue Router 入门指南：构建你的第一个单页应用

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

什么是 Vue Router

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页面应用变得轻而易举。通过 Vue Router，你可以：

• 定义路由与组件之间的映射关系
• 实现嵌套路由和模块化路由配置
• 提供导航控制功能
• 自动激活 CSS 类的链接
• 支持 HTML5 历史模式或 hash 模式

基础安装与使用

1. 引入 Vue Router

首先确保你已经引入了 Vue.js，然后引入 Vue Router：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2. 创建基本组件

定义两个简单的组件用于演示：

const Foo = { template: '<div>这是Foo组件</div>' }
const Bar = { template: '<div>这是Bar组件</div>' }

3. 配置路由规则

创建一个路由配置数组，将路径映射到对应的组件：

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

4. 创建路由实例

使用配置好的路由规则创建路由实例：

const router = new VueRouter({
  routes // ES6简写，等同于 routes: routes
})

5. 创建并挂载根实例

将路由实例注入到 Vue 根实例中：

const app = new Vue({
  router
}).$mount('#app')

核心概念解析

路由视图 <router-view>

<router-view> 是一个函数式组件，它会根据当前路由路径渲染对应的组件。你可以把它想象成一个动态的占位符，Vue Router 会根据路由配置自动填充这个位置。

导航链接 <router-link>

<router-link> 是 Vue Router 提供的导航组件，它会渲染成 <a> 标签，但具有以下增强功能：

• 自动处理点击事件，防止页面重新加载
• 根据当前路由自动添加激活类名
• 支持编程式导航

基本用法：

<router-link to="/foo">前往Foo</router-link>
<router-link to="/bar">前往Bar</router-link>

路由实例与路由对象

在任何组件中，你都可以通过以下方式访问路由信息：

• this.$router：访问路由实例（用于编程式导航）
• this.$route：访问当前路由信息（包含路径、参数、查询等）

编程式导航

除了使用 <router-link> 创建声明式导航外，你还可以使用编程式导航：

// 跳转到指定路径
this.$router.push('/foo')

// 带参数跳转
this.$router.push({ path: '/user', query: { id: '123' } })

// 前进/后退
this.$router.go(-1) // 后退一步
this.$router.go(1)  // 前进一步

路由激活样式

默认情况下，当 <router-link> 对应的路由匹配成功时，它会自动获得 router-link-active 类名。你可以利用这个特性为当前激活的导航项添加特殊样式：

.router-link-active {
  color: #42b983;
  font-weight: bold;
}

最佳实践建议

1. 组件组织：对于复杂应用，建议将路由配置单独放在一个文件中管理

2. 懒加载：使用动态导入实现路由组件的懒加载，优化初始加载速度

3. 命名路由：为路由命名可以提高代码可维护性

4. 导航守卫：利用导航守卫实现权限控制等高级功能

5. 滚动行为：自定义路由切换时的滚动行为提升用户体验

常见问题解答

Q：为什么我的组件没有正确渲染？ A：确保你已经在模板中放置了 <router-view> 标签，并且路由路径拼写正确。

Q：如何获取当前路由参数？ A：在组件中使用 this.$route.params 或 this.$route.query 访问路由参数。

Q：路由切换时如何执行特定逻辑？ A：可以使用组件内的导航守卫（如 beforeRouteEnter）或全局导航守卫。

通过这篇指南，你应该已经掌握了 Vue Router 的基本使用方法。接下来可以继续学习嵌套路由、命名路由、路由守卫等高级特性来构建更复杂的单页应用。

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router