15.1 路由基础-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

15.1 路由基础

在Vue.js的应用开发中，随着项目规模的扩大和页面结构的复杂化，单页面应用（SPA, Single Page Application）的概念变得尤为重要。Vue.js社区中，Vue Router作为官方维护的路由管理器，为构建单页面应用提供了强大的支持。本章节将深入讲解Vue Router的基本概念、安装配置、基本用法以及路由的高级特性，帮助读者从入门到精通Vue.js路由管理的各个方面。

15.1.1 理解Vue Router

Vue Router是Vue.js的官方路由管理器，它与Vue.js深度集成，让构建单页面应用变得易如反掌。通过Vue Router，你可以定义应用中不同的URL对应不同的组件，实现页面的无缝切换，而无需重新加载页面。这种方式不仅提升了用户体验，还优化了资源加载，加快了页面响应速度。

15.1.2 安装Vue Router

在Vue 2.x版本中，Vue Router通常需要单独安装。如果你使用的是Vue CLI创建的项目，可以通过Vue CLI的插件系统来添加Vue Router。对于非Vue CLI项目，或者Vue 3.x（配合Vue Router 4.x）项目，可以通过npm或yarn来安装Vue Router。

# Vue 2.x项目
npm install vue-router@3
# 或者
yarn add vue-router@3
# Vue 3.x项目
npm install vue-router@4
# 或者
yarn add vue-router@4

15.1.3 配置Vue Router

安装完成后，你需要在项目中配置Vue Router。这通常涉及到创建路由实例、定义路由映射，并将路由实例挂载到Vue根实例上。

步骤1：定义路由映射

路由映射是一个由多个路由记录（route records）组成的数组，每个路由记录都需要至少包含path（路径）和component（组件）两个属性。

import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

步骤2：创建路由实例

使用VueRouter构造函数，传入路由映射（routes）和其他配置（如模式mode，默认为hash模式，也可以设置为history模式以去除URL中的#），创建路由实例。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes, // 使用上面定义的routes
  mode: 'history' // 使用history模式
})

步骤3：挂载路由实例

在Vue根实例的创建过程中，通过router选项将路由实例挂载到Vue实例上。

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

15.1.4 基本路由使用

配置好Vue Router后，你就可以在Vue组件中通过<router-link>来创建导航链接，并通过<router-view>来展示当前路由对应的组件了。

<router-link>：用于声明式地导航到不同的URL，对应一个a标签，但会被Vue Router处理，不会重新加载页面。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

<router-view>：路由出口，用于渲染匹配到的路由组件。

<router-view></router-view>

15.1.5 路由嵌套

在Vue Router中，你可以通过子路由（嵌套路由）来组织更复杂的页面结构。子路由的定义方式与普通路由类似，但需要将它们放在某个路由的children属性中。

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: '', // 当路径为空时，默认渲染User组件的子路由中的第一个路由
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

在<router-view>中，你可以嵌套另一个<router-view>来渲染子路由对应的组件。

<!-- User.vue -->
<template>
  <div>
    <h1>User Page</h1>
    <router-view></router-view> <!-- 子路由组件将渲染在这里 -->
  </div>
</template>

15.1.6 路由守卫

Vue Router提供了全局守卫、路由独享守卫和组件内守卫三种守卫方式，用于在路由跳转前后执行特定的逻辑，如权限校验、页面标题设置等。

全局守卫：如beforeEach、beforeResolve和afterEach，它们会在每次路由导航时触发。
路由独享守卫：在路由配置中直接定义，只影响当前路由。
组件内守卫：在组件内部定义，包括beforeRouteEnter、beforeRouteUpdate（2.2+）和beforeRouteLeave。

// 全局前置守卫示例
router.beforeEach((to, from, next) => {
  // 逻辑处理...
  next(); // 必须调用next()方法来解析守卫中的钩子
});

15.1.7 编程式导航

除了使用<router-link>进行声明式导航外，Vue Router还提供了编程式导航的API，允许你在JavaScript代码中实现路由跳转。

// 使用router.push方法
this.$router.push('/some-path')
// 或带有查询参数，变成/foo?user=1
this.$router.push({ path: 'foo', query: { user: '1' }})
// 使用router.replace方法（不会向history添加新记录）
this.$router.replace('/some-path')
// 命名路由
this.$router.push({ name: 'user', params: { userId: 123 }})

15.1.8 总结

通过本章节的学习，你应该已经掌握了Vue Router的基本概念、安装配置、基本用法以及路由的高级特性，如路由嵌套、路由守卫和编程式导航等。Vue Router为Vue.js应用提供了强大的路由管理能力，使得构建复杂的单页面应用变得简单高效。随着你对Vue Router的深入理解和实践，你将能够更加灵活地运用它来优化你的Vue.js应用结构和用户体验。