Vue Router的使用与路由配置

# 1. 简介

### 1.1 什么是Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得轻而易举。通过 Vue Router，我们可以在应用中实现页面之间的跳转、参数传递、路由守卫等功能。

### 1.2 Vue Router的优势和特点

- **基于Vue.js**：Vue Router 是由 Vue.js 的官方团队维护，因此与 Vue.js 深度结合，使用起来非常方便。
- **声明式**：通过简单的配置，我们就可以定义应用的路由规则，让我们能够更直观地理解整个应用的页面结构。
- **嵌套路由**：Vue Router 支持嵌套路由，可以很方便地定义父子页面的关系，使得页面结构更加清晰明了。

- **路由参数**：Vue Router 提供了多种方式来传递参数，包括基于 URL 的传参、命名路由传参、通过路由导航守卫传参等。

### 1.3 Vue Router的安装和引入

通过 npm 安装 Vue Router：

npm install vue-router

在项目中引入 Vue Router：

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

Vue.use(VueRouter)

# 2. 路由基本配置

在使用Vue Router之前，我们首先需要进行一些基本的配置。

### 2.1 创建Vue Router实例

要使用Vue Router，在Vue应用中创建一个Vue Router实例是必须的。我们可以使用Vue Router的`Vue.use()`方法来全局注册Vue Router插件，并创建一个Vue Router实例。

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

在上述示例中，我们首先使用`import`语句引入Vue Router和相关的组件（`Home.vue`和`About.vue`）。然后，我们使用`Vue.use()`方法全局注册Vue Router插件。接下来，我们创建一个路由配置数组`routes`，其中包含了两个路由对象，分别对应根路径和`/about`路径。最后，我们创建一个Vue Router实例，并将其作为一个选项传递给Vue实例，这样我们就完成了Vue Router的基本配置。

### 2.2 设置根路由

在上面的示例中，我们设置了一个根路径的路由对象，其中`path`为`'/'`，`component`为`Home`组件。它将作为默认的路由，在访问应用的根路径时显示。

// routes数组中的路由对象
{
  path: '/',
  component: Home
}

### 2.3 配置子路由和嵌套路由

除了根路径外，我们还可以设置其他子路径的路由。这些子路径的路由对象可以通过在父路径的路由对象中使用`children`选项来配置。

// routes数组中的路由对象
{
  path: '/about',
  component: About,
  children: [
    {
      path: 'profile',
      component: Profile
    },
    {
      path: 'contact',
      component: Contact
    }
  ]
}

在上述示例中，我们配置了一个`/about`路径的父路由对象，并在其中设置了两个子路由对象（`profile`和`contact`）。这样，在访问`/about/profile`时，将渲染`Profile`组件，在访问`/about/contact