Vue Router Gray 项目教程

1. 项目的目录结构及介绍

Vue Router Gray 项目的目录结构如下：

vue-router-gray/
├── src/
│   ├── components/
│   ├── router/
│   │   ├── index.js
│   ├── App.vue
│   ├── main.js
├── public/
│   ├── index.html
├── package.json
├── README.md

目录结构介绍

• src/: 源代码目录，包含项目的所有源文件。
  • components/: 存放 Vue 组件的目录。
  • router/: 存放路由配置文件的目录。
    • index.js: 路由配置文件，定义了项目的路由规则。
  • App.vue: 项目的根组件。
  • main.js: 项目的入口文件。
• public/: 公共资源目录，包含静态文件。
  • index.html: 项目的主 HTML 文件。
• package.json: 项目的依赖管理文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 main.js，其主要作用是初始化 Vue 实例并挂载到 DOM 中。以下是 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');

启动文件介绍

• 导入 Vue 和相关模块: 导入 Vue 库、根组件 App.vue 和路由配置 router。
• 配置 Vue: 设置 Vue.config.productionTip 为 false，以关闭生产环境提示。
• 创建 Vue 实例: 创建一个新的 Vue 实例，并传入路由配置和渲染函数。
• 挂载到 DOM: 将 Vue 实例挂载到 ID 为 app 的 DOM 元素上。

3. 项目的配置文件介绍

项目的配置文件主要是 router/index.js，其主要作用是定义项目的路由规则。以下是 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({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
  ],
});

配置文件介绍

• 导入 Vue 和 Router: 导入 Vue 库和 Vue Router 模块。
• 注册 Router: 使用 Vue.use(Router) 注册 Vue Router。
• 定义路由规则: 创建一个新的 Router 实例，并定义路由规则。
  • path: 路由路径。
  • name: 路由名称。
  • component: 对应路径的组件。

通过以上配置，项目可以根据不同的 URL 路径加载相应的组件，实现页面导航功能。