文章目录
- 1. 安装 vue-router
- 2. 创建路由模块
- 3. 在 main.js 中使用路由
- 4. 注意
1. 安装 vue-router
首先，如果还没有安装 vue-router，需要在项目目录下通过命令行进行安装。假设你的项目是基于npm管理包的，使用以下命令安装：
npm install vue-router@4
这里安装的是vue-router的第 4 版，因为是在Vue 3环境下使用。
2. 创建路由模块
在项目的src目录下创建一个router文件夹，在该文件夹内创建一个index.js（也可以是其他文件名，如router.js）文件。
导入Vue和VueRouter，以及需要展示的组件。例如，有两个组件Home.vue和About.vue，代码如下：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
这里createWebHistory是用于设置路由模式为 HTML5 的历史模式。
然后创建路由实例并定义路由规则：
const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];
const router = createRouter({history: createWebHistory(),routes
});
export default router;
在路由规则中，path表示浏览器访问的路径，name是路由的名称（可选，但方便后续引用），component是对应的组件。
3. 在 main.js 中使用路由
在main.js文件中，导入刚刚创建的路由模块，并将其挂载到Vue应用上。代码如下：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
这样，Vue应用就集成了路由功能。当浏览器访问http://localhost:（你的端口号）/时，会显示Home组件；访问http://localhost:（你的端口号）/about时，会显示About组件。
4. 注意
需要注意的是：
- 路径的设置要符合实际需求，并且确保组件的路径正确导入。如果组件的路径发生变化，需要相应地更新路由文件中的导入路径。
- 除了
createWebHistory模式，还有createWebHashHistory模式。createWebHashHistory会在浏览器的 URL 后面添加#符号来管理路由，例如http://localhost:（你的端口号）/#/about。这种模式在某些服务器配置下可能更方便，但是 URL 看起来会比较复杂。
