学习和分享关于 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>