指引 | 轻松搞定vue-新建目录及菜单

创建 Vue.js 应用的菜单和页面：分步指南

简介

在任何现代 Web 应用程序中，组织结构合理且易于导航的菜单至关重要。Vue.js 是一款流行的 JavaScript 框架，可以轻松创建具有复杂菜单和页面的动态单页应用程序。本教程将逐步指导您如何在 Vue.js 项目中建立自己的菜单和页面。

创建视图目录

让我们首先创建一个目录来存储我们的视图文件。视图文件负责定义应用程序的用户界面。在项目根目录下，使用以下命令创建 src/views 目录：

mkdir src/views

创建页面视图

现在，让我们在 src/views 目录中创建两个视图文件：Home.vue 和 About.vue。这些文件将分别包含我们的主页和关于页面。

touch src/views/Home.vue
touch src/views/About.vue

添加路由

下一步是将我们的新页面添加到 Vue Router 中。打开 src/router.js 文件并添加以下路由：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.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>

运行应用程序

现在，我们已经设置好了我们的菜单和页面，可以运行我们的应用程序。在终端中，使用以下命令：

npm run serve

然后，在浏览器中导航到 http://localhost:8080。您应该会看到一个带有主页和关于页面的应用程序。

结论

遵循本教程中的步骤，您已经成功地在 Vue.js 项目中创建了一个菜单和页面。这种组织结构将使您的用户能够轻松浏览您的应用程序并找到所需的信息。

常见问题解答

1. 如何向我的菜单添加更多页面？

   • 在 src/views 目录中创建新的视图文件并向 src/router.js 中的 routes 数组添加相应的路由。

2. 如何在菜单中设置活动状态样式？

   • 在您的导航 <router-link> 组件中使用 active-class 属性。

3. 如何设置默认页面？

   • 在 src/router.js 中的 routes 数组中将您的默认页面作为第一个元素。

4. 如何使用嵌套路由？

   • 在 src/router.js 中创建一个嵌套路由数组，其中子路由包含在父路由内。

5. 如何传递数据到我的页面？

   • 使用 Vue Router 的 props 或 route.params 来传递数据到您的页面组件。