将路由抽离为一个 js 文件

将路由抽离为一个 js 文件可以更方便地管理路由及页面，后续我们还可以将路由守卫（ 拦截 ）等相关逻辑一并放到此文件，使得项目结构更加清晰。

实现步骤如下 :

1. 创建路由文件

如 : /src/route.js

// 1. 定义路由
const routes = [
	{ path : '/'     , component : ()=> import("./pages/Home.vue")  },
	{ path : '/about', component : ()=> import("./pages/About.vue") },
]

// 2. 创建路由
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
	history : createWebHashHistory(),
	routes  : routes
});

// 3. 使用 export 导出路由
export default router;

2. 在 main.js 中使用路由

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

// 从 route.js 导出路由数据
import router from "./route.js";

const app = createApp(App);
// 使用路由
app.use(router);
app.mount('#app');

好了~ 到此我们就完成了路由文件抽离的工作，请继续跟随我们学习更多路由相关的知识。