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，开发者可以轻松实现页面间的无缝切换，同时保持应用的响应性和用户体验。

基础环境搭建

在开始使用 Vue Router 之前，你需要确保已经正确引入 Vue.js 和 Vue Router。有两种主要方式：

1. 直接引入 CDN（适合快速原型开发）：

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

2. 模块化系统（推荐用于正式项目）： 如果你使用 Vue CLI 或类似的模块化构建工具，可以通过 npm 或 yarn 安装：

npm install vue-router

然后在主文件中导入并使用：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

核心概念解析

1. 路由组件

路由组件就是普通的 Vue 组件，它们会被映射到特定的 URL 路径上。例如：

const Home = { template: '<div>欢迎来到首页</div>' }
const About = { template: '<div>这是关于页面</div>' }

2. 路由配置

路由配置是一个数组，其中每个对象定义了一条路由规则：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

3. 路由实例

创建路由实例并传入配置：

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

4. 根实例注入

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

new Vue({
  router,
  el: '#app'
})

模板中的关键元素

router-link

这是 Vue Router 提供的导航组件，它会渲染成 <a> 标签：

<router-link to="/about">关于我们</router-link>

特性：

• to 属性指定目标路由
• 会自动添加激活状态的类名
• 支持多种路由匹配模式

router-view

这是路由组件的出口，匹配的组件会在这里渲染：

<div id="app">
  <router-view></router-view>
</div>

完整示例解析

让我们看一个完整的示例，了解各个部分如何协同工作：

<div id="app">
  <h1>我的应用</h1>
  <nav>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view></router-view>
</div>

// 定义路由组件
const Home = { template: '<div>欢迎来到首页</div>' }
const About = { template: '<div>这是关于页面</div>' }

// 配置路由
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 创建并挂载根实例
new Vue({
  router
}).$mount('#app')

最佳实践建议

1. 组件组织：将路由组件放在专门的目录中（如 views/ 或 pages/）

2. 懒加载：对于大型应用，使用路由懒加载提升性能：

const About = () => import('./views/About.vue')

3. 命名路由：为路由添加名称便于维护：

{ path: '/about', name: 'about', component: About }

4. 默认路由：添加重定向或404页面：

{ path: '*', redirect: '/home' }

常见问题解答

Q: 为什么我的路由组件没有显示？ A: 检查是否在模板中添加了 <router-view>，以及路由路径是否正确匹配。

Q: 如何获取当前路由信息？ A: 在组件中可以通过 this.$route 访问当前路由对象。

Q: 路由切换时如何传递参数？ A: 可以使用动态路由或查询参数，我们将在后续教程中详细介绍。

通过这篇指南，你应该已经掌握了 Vue Router 的基本使用方法。接下来可以探索更高级的功能，如嵌套路由、导航守卫、路由元信息等，这些功能将帮助你构建更加强大的单页应用。

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