入门指南12：Vue Router 的基本使用在单页面应用（SPA）中，Vue Router 是一个非常重要的工具，它使

在单页面应用（SPA）中，Vue Router 是一个非常重要的工具，它使得在不重新加载页面的情况下，能够根据 URL 的变化动态地加载和切换不同的视图。在 Vue.js 中，Vue Router 负责页面路由管理，是构建动态应用的核心组成部分。

本篇文章将带领你了解如何使用 Vue Router 进行基本的路由配置、路由切换和嵌套路由等操作，让你能够在 Vue 项目中轻松实现页面导航。

一、安装 Vue Router

首先，在 Vue 项目中使用 Vue Router，你需要安装 Vue Router 插件。你可以通过 npm 来安装它：

npm install vue-router

安装完成后，我们就可以在 Vue 项目中使用 Vue Router 了。

二、Vue Router 的基本使用

1. 配置 Vue Router

安装 Vue Router 后，我们需要在项目中进行配置。首先，在 src/router/index.js 文件中配置路由，通常我们会将路由配置独立成一个文件，然后在主文件中引入并使用。

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';

Vue.use(Router);

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

const router = new Router({
  routes // 缩写，相当于 routes: routes
});

export default router;

在这个配置文件中，我们做了以下几件事：

使用 Vue.use(Router) 将 Vue Router 安装到 Vue 实例中。
定义了 routes 数组，配置了两个路由：/ 映射到 Home 组件，/about 映射到 About 组件。
创建了 Router 实例，并将 routes 配置传入。

2. 在 `main.js` 中使用 Vue Router

接下来，我们需要在 src/main.js 文件中引入路由，并将其添加到 Vue 实例中：

// src/main.js
import Vue from 'vue';
import App from './App';
import router from './router'; // 引入路由配置

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router, // 将 router 添加到 Vue 实例中
  render: h => h(App)
});

这里，我们将 router 作为一个选项传递给 Vue 实例，使得 Vue 应用具备了路由功能。

三、路由视图与路由链接

1. 路由视图 (`<router-view>`)

在模板中，我们需要使用 <router-view> 作为占位符，告诉 Vue Router 在这个地方渲染匹配的组件。通常我们会在根组件 App.vue 中使用 <router-view>。

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view></router-view> <!-- 路由视图 -->
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

当路由发生变化时，<router-view> 会根据当前路由的路径渲染对应的组件。

2. 路由链接 (`<router-link>`)

Vue Router 提供了 <router-link> 组件，用来创建路由链接，用户点击后会根据指定的 to 属性跳转到相应的路由。

<!-- src/components/Navbar.vue -->
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

<router-link> 组件会自动生成一个 <a> 标签，并且在点击时不会刷新页面，而是通过 Vue Router 实现页面的跳转。

四、动态路由与参数传递

有时我们需要在路由中传递参数，以便根据不同的参数显示不同的内容。Vue Router 支持动态路由匹配和参数传递。

1. 动态路由

动态路由使用 :param 语法来表示参数，这样可以让路由匹配不同的 URL。

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
];

在上面的例子中，/user/:id 是一个动态路由，:id 是一个路由参数，代表用户的唯一标识符。

2. 访问路由参数

我们可以通过 this.$route.params 访问路由参数。在组件中，你可以通过 this.$route.params.id 获取到传递的 id 参数。

// src/components/User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.params.id // 获取路由参数
    };
  },
  watch: {
    // 路由参数变化时，更新 userId
    '$route' (to, from) {
      this.userId = to.params.id;
    }
  }
};
</script>

在这个组件中，我们通过 this.$route.params.id 获取路由传递的 id 参数，并将其显示在页面上。

3. 路由跳转传递参数

可以通过 $router.push() 或 <router-link> 的 :to 属性来传递参数。

// 使用 $router.push()
this.$router.push({ name: 'user', params: { id: 123 } });

// 使用 <router-link>
<router-link :to="{ name: 'user', params: { id: 123 } }">Go to User</router-link>

五、嵌套路由

有时我们需要在一个页面中展示多个组件，可以使用嵌套路由来实现。这种方式非常适合管理多层级的页面结构。

1. 配置嵌套路由

在 Vue Router 中，嵌套路由是通过配置 children 数组来实现的。例如，在 Home 组件中嵌套 Profile 和 Settings 组件：

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
];

2. 嵌套路由视图

在父组件中，需要添加嵌套路由视图 <router-view> 来渲染嵌套的子组件：

<!-- src/components/Home.vue -->
<template>
  <div>
    <h1>Welcome to Home</h1>
    <router-view></router-view> <!-- 渲染子路由 -->
  </div>
</template>

六、路由守卫

路由守卫用于控制路由的访问权限，常见的有：

全局守卫：作用于所有路由。
路由独享守卫：作用于某个路由。
组件内守卫：作用于某个组件。

例如，我们可以使用 beforeEach 全局守卫来控制路由的权限：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 如果需要认证且未登录，则跳转到登录页面
  } else {
    next(); // 继续路由
  }
});

七、小结

Vue Router 是 Vue 应用中的核心部分，能够帮助我们轻松实现页面的导航和路由控制。在本篇文章中，我们学习了如何安装和使用 Vue Router，掌握了基本的路由配置、动态路由、路由传参、嵌套路由等功能。

通过合理使用 Vue Router，我们可以构建更加丰富和动态的单页面应用（SPA）。希望你在实际开发中能够灵活运用这些概念，实现更加流畅的用户体验。

下一篇文章，我们将继续探讨 Vue 中的状态管理工具 Vuex，敬请期待！

入门指南12：Vue Router 的基本使用