🌐 vue-router的安装使用 🛠️

在前端开发中，`vue-router` 是 Vue.js 官方提供的路由管理工具，帮助开发者轻松实现单页面应用（SPA）的导航功能。今天，让我们用一种轻松的方式聊聊它的安装与基本使用！👀

首先，你需要通过 npm 或 yarn 安装 `vue-router`。打开终端，输入以下命令：

```bash

npm install vue-router@4

```

接着，在项目中配置路由。创建一个 `router.js` 文件，引入必要的模块并定义路由规则：

```javascript

import { createRouter, createWebHistory } from 'vue-router';

import Home from './views/Home.vue';

import About from './views/About.vue';

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About }

];

const router = createRouter({

history: createWebHistory(),

routes

});

export default router;

```

最后，在主文件中引入并使用这个路由器：

```javascript

import { createApp } from 'vue';

import App from './App.vue';

import router from './router';

createApp(App).use(router).mount('app');

```

这样，你就完成了基本设置！在页面中通过 `` 实现导航，例如：

```html

首页

关于我们

```

是不是很简单？🎉 如果你希望使用 hash 模式（如 `/about`），只需将 `createWebHistory()` 替换为 `createWebHashHistory()` 即可！_hashes 和 bangs 的组合，也能让应用更灵活哦！✨

🚀 开始你的 Vue 路由之旅吧！