搭建 vue router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。以下是如何搭建 Vue Router 的步骤：

1. **安装 Vue Router**：
首先，确保你已经安装了 Vue CLI。如果没有安装，可以使用以下命令进行安装：

   npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

   vue create my-project

进入项目目录并安装 Vue Router：

   cd my-project
   npm install vue-router

2. **创建路由文件**：
在 `src` 目录下创建一个新的文件夹 `router`，并在其中创建一个 `index.js` 文件：

   mkdir src/router
   touch src/router/index.js

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',
     routes: [
       {
         path: '/',
         name: 'Home',
         component: Home
       },
       {
         path: '/about',
         name: 'About',
         component: About
       }
     ]
   });

4. **创建组件**：
在 `src/components` 目录下创建 `Home.vue` 和 `About.vue` 组件：

   touch src/components/Home.vue
   touch src/components/About.vue

在 `Home.vue` 中添加以下内容：

   <template>
     <div>
       <h1>Home</h1>
       <p>This is the home page.</p>
     </div>
   </template>

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

在 `About.vue` 中添加以下内容：

   <template>
     <div>
       <h1>About</h1>
       <p>This is the about page.</p>
     </div>
   </template>

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

5. **在主文件中引入路由**：
在 `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');

6. **在 App.vue 中添加导航链接**：
在 `src/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 {
     display: flex;
     justify-content: space-around;
     padding: 10px;
     background-color: #f5f5f5;
   }
   </style>

通过以上步骤，你就可以成功搭建一个基本的 Vue Router 应用。