27 Vue Router简介之Vue Router的安装与配置

在前面的章节中，我们探讨了组件间的通信，特别是通过插槽的概念来实现灵活的组件交互。这一节将开始介绍Vue Router，一个处理单页面应用（SPA）路由的强大工具。在这里，我们将重点讨论如何安装和配置Vue Router，为后续的路由使用打下基础。

Vue Router的安装

在新的Vue项目中，我们可以通过npm来安装Vue Router。首先确保你正在使用Vue CLI创建的项目，如果没有，可以使用以下命令创建一个新的Vue项目：

vue create my-project

进入项目目录后，使用以下命令安装Vue Router：

npm install vue-router

安装完成后，我们需要在项目中引入并配置Vue Router。

Vue Router的配置

在Vue项目中，通常在src/router/index.js中进行路由的配置。如果该文件不存在，可以手动创建。以下是一个基本的配置示例：

创建路由配置

1. 创建一个Home.vue组件，用于显示首页内容：

<template>
  <div>
    <h1>主页</h1>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

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

2. 创建一个About.vue组件，用于显示关于页面内容：

<template>
  <div>
    <h1>关于我们</h1>
    <router-link to="/">返回主页</router-link>
  </div>
</template>

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

3. 在src/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({
  mode: 'history', // 使用HTML5的历史模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
  ],
});

主应用中引入路由

接下来，在src/main.js中引入并使用我们的路由配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由

Vue.config.productionTip = false;

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

使用路由视图

最后，为了在页面中显示对应的组件，我们需要在App.vue中添加<router-view>，这将是路由匹配组件渲染的地方：

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

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

至此，我们已经成功安装和配置了Vue Router，并且设置了基本的路由。你可以通过访问/和/about路由来体验不同页面的切换。

小结

我们介绍了如何安装Vue Router以及基本的路由配置。你可以根据实际需求扩展更多的路由，并引入不同的组件。下一章将深入探讨路由的基本使用，包括路由的跳转、动态路由等内容，这将使我们能够更加灵活地管理单页面应用的页面导航。

请确保在继续之前已经理解了如何设置和使用Vue Router，这些都是构建复杂应用的基础。