学习和分享关于 Vue.js 的路由（vue-router）

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

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：

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page.</p>
  </div>
</template>

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

<style scoped>
/* Add your styles here */
</style>

AboutView.vue：

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

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

<style scoped>
/* Add your styles here */
</style>

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 以包含路由视图和导航链接：

<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>
/* Add your styles here */
</style>

6. 启动开发服务器

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

npm run serve

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

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