从0打1 用node express vite搭建一个博客系统 系列5

安装路由 ，以及配置路由 实现路由跳转

npm install vue-router@next

创建路由配置文件：
在项目的 src 目录下创建一个新的文件夹，例如 router，然后在该文件夹下创建一个新的文件 index.js，作为路由的配置文件。示例内容如下：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在入口文件中使用路由：
打开项目的入口文件（通常是 src/main.js 或 src/main.ts），添加以下内容来使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

创建路由组件：
在项目的 src/views 目录下创建路由组件，例如 Home.vue 和 About.vue。在这些组件中定义路由页面的内容。

使用路由：
在需要使用路由的地方，例如 App.vue 或其他组件中，可以通过使用 组件和 组件来创建链接和展示路由页面。

在app.vue 添加 组件，实现路由跳转

在ip地址输入/about就可以实现路由跳转了