深入解析 Vue Router：构建单页面应用的利器

Vue.js 是一个渐进式 JavaScript 框架，常用于构建用户界面。随着应用的复杂度增加，路由（Routing）变得越来越重要，这就是 Vue Router 的用武之地。Vue Router 是官方提供的 Vue.js 路由管理器，用于创建单页面应用（SPA）。本文将详细介绍 Vue Router 的基本概念和使用方法，帮助你更好地构建和管理 Vue.js 应用的路由。

什么是 Vue Router？

Vue Router 是一个用于 Vue.js 应用的官方路由管理器，能够使开发者轻松地在不同的视图之间导航。它与 Vue.js 深度集成，提供了一套强大的 API 来管理应用的路由。

安装 Vue Router

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

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

配置 Vue Router

安装完成后，可以在 Vue 应用中配置 Vue Router。以下是一个基本的配置示例：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});

export default router;

然后，在 Vue 实例中挂载路由：

// src/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');

定义路由组件

在上述示例中，我们定义了两个路由：Home 和 About。接下来，需要创建这些路由对应的组件。

// src/views/Home.vue
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

// src/views/About.vue
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

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

使用 <router-link> 和 <router-view>

为了在应用中导航，可以使用 <router-link> 组件，它会渲染一个带有 href 属性的 <a> 标签，用于导航到不同的路由。

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

<router-view> 组件是一个占位符，表示匹配到的组件将会渲染在这里。

路由模式

Vue Router 提供了两种路由模式：hash 模式和 history 模式。

• Hash 模式：使用 URL 的哈希（#）部分来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。
• History 模式：利用浏览器的 history.pushState API 来实现 URL 跳转而无需重新加载页面。

在上面的示例中，我们使用了 history 模式。如果你希望使用 hash 模式，可以将 mode 设置为 'hash'：

const router = new VueRouter({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes
});