1. Vue Router 简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成，让构建单页面应用（SPA）变得易如反掌。路由主要用于在单页面应用中管理不同的视图（页面）及其之间的导航。

2. 基本配置

在使用 Vue Router 之前，需要先安装它。你可以通过 npm 或 yarn 进行安装：

npm install vue-router
# 或者
yarn add vue-router

接下来，配置 Vue Router。首先，我们需要创建一个路由配置文件，例如 `router/index.js`：

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

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

然后在你的主入口文件（例如 `main.js`）中引入并使用这个路由配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

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

3. 案例讲解

下面是一个简单的案例，包含两个页面：Home 和 About。

3.1 创建组件

创建两个组件文件 `Home.vue` 和 `About.vue`：

// Home.vue
<template>
  <div>
    <h2>Home Page</h2>
    <p>Welcome to the Home Page!</p>
  </div>
</template>

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

// About.vue
<template>
  <div>
    <h2>About Page</h2>
    <p>This is the About Page!</p>
  </div>
</template>

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

3.2 配置路由

确保你的路由配置文件（例如 `router/index.js`）已经配置好：

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

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

3.3 添加导航链接

在你的主组件（例如 `App.vue`）中添加导航链接：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

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

<style>
nav {
  margin-bottom: 20px;
}
</style>

4. 总结

通过本文，你应该已经了解了 Vue Router 的基本概念和配置方法，并通过一个简单的案例掌握了其使用方法。Vue Router 使得在 Vue.js 应用中管理不同视图及其导航变得非常方便，是构建单页面应用的重要工具。