学习和分享关于 Vue.js 的路由（vue-router）是一个非常有价值的主题，因为路由是构建单页应用程序（SPA）的核心部分。本文将介绍 Vue.js 路由的基本概念和实现，并展示一个典型的项目目录结构。

目录

• • Vue.js 路由简介
  • 目录结构
  • • 关键文件和文件夹
    • 实现基本的路由
    • • 1. 安装 Vue Router
      • 2. 配置路由
      • 3. 创建视图组件
      • 4. 修改 `main.js`
      • 5. 更新根组件 `App.vue`
      • 6. 启动开发服务器

        Vue.js 路由简介

        Vue Router 是 Vue.js 官方的路由管理器，允许我们在 Vue 应用中实现客户端路由。它使我们可以创建多个页面或视图，并在用户导航时保持单页应用程序的感觉。

        目录结构

        一个典型的 Vue.js 项目目录结构（包括 Vue Router）如下所示：

        my-vue-app/
        ├── node_modules/
        ├── public/
        │   ├── index.html
        │   └── ...
        ├── src/
        │   ├── assets/
        │   ├── components/
        │   │   ├── Home.vue
        │   │   ├── About.vue
        │   │   └── ...
        │   ├── router/
        │   │   └── index.js
        │   ├── views/
        │   │   ├── HomeView.vue
        │   │   ├── AboutView.vue
        │   │   └── ...
        │   ├── App.vue
        │   ├── main.js
        │   └── ...
        ├── .gitignore
        ├── babel.config.js
        ├── package.json
        ├── README.md
        └── vue.config.js
        

        关键文件和文件夹

        • public/：包含静态文件，如 index.html。
        • src/：包含源代码。
          • assets/：存放静态资源（如图片、字体等）。
          • components/：存放 Vue 组件。
          • router/：存放路由配置文件。
            • index.js：定义路由和路由规则。
            • views/：存放视图组件（通常是页面级组件）。
            • App.vue：根组件。
            • main.js：入口文件，初始化 Vue 实例并挂载到 DOM。

              实现基本的路由

              下面是实现基本路由的步骤：

              1. 安装 Vue Router

              首先，需要安装 Vue Router：

              npm install vue-router
              

              2. 配置路由

              创建并配置路由文件 src/router/index.js：

              import Vue from 'vue';
              import VueRouter from 'vue-router';
              import HomeView from '../views/HomeView.vue';
              import AboutView from '../views/AboutView.vue';
              Vue.use(VueRouter);
              const routes = [
                {
                  path: '/',
                  name: 'Home',
                  component: HomeView
                },
                {
                  path: '/about',
                  name: 'About',
                  component: AboutView
                }
              ];
              const router = new VueRouter({
                mode: 'history',
                base: process.env.BASE_URL,
                routes
              });
              export default router;
              

              3. 创建视图组件

              在 src/views/ 目录下创建视图组件 HomeView.vue 和 AboutView.vue。

              HomeView.vue：

              AboutView.vue：

              4. 修改 main.js

              在 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');
              

              5. 更新根组件 App.vue

              修改 src/App.vue 以包含路由视图和导航链接：

              6. 启动开发服务器

              最后，启动开发服务器并查看效果：

              npm run serve
              

              打开浏览器访问 http://localhost:8080，你应该能够看到首页和关于页面，并可以通过导航链接在它们之间切换。

              ---

              通过这些步骤，你已经创建了一个包含 Vue Router 的基本 Vue.js 应用程序。你可以根据需要添加更多的路由和组件，以构建更加复杂和功能丰富的应用。希望这篇文章能帮助你快速入门并分享 Vue.js 路由的知识。