1. 安装Vue Router
npm install vue-router2. 创建Home.vue组件
在 src/views 目录下创建一个名为 Home.vue 的文件：
<!-- <template> 标签是Vue组件的模板部分，其中包含了组件的HTML结构。 -->
<template><div><h1>Welcome to Nano Antibody Data Retrieval!</h1><!-- Add your content here --></div></template><script>export default {name: 'Home',// Add your component logic here};</script><style scoped>/* Add your component styles here */</style>script部分导出了一个对象，这个对象描述了 Home.vue 组件的行为和逻辑。name 属性用于指定组件的名称，这对于调试和组件间通信非常有用。你可以根据需要在这里添加其他属性和方法，比如数据、计算属性、生命周期钩子等。
style scoped 是 Home.vue 组件的样式部分。scoped 关键字表示这些样式只会应用于当前组件，不会影响到其他组件。你可以在这里添加CSS规则来美化你的组件，比如修改标题的颜色、设置背景等。
3. 设置基本路由
src/router/index.js 中：
import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter); // 告诉Vue在全局范围内使用VueRouter插件// 定义路由
const routes = [ // 定义数组routes，其中包含一个对象，描述了应用程序的路由信息。{ // 每个路由对象都至少包含 path、name 和 component 属性。path: '/',name: 'Home',component: () => import('@/views/Home.vue'), // 对应的组件是：Home.vue组件},// 在这里添加其他路由
];// 创建了一个VueRouter实例，将之前定义的路由传递给它：
const router = new VueRouter({routes,
});// 导出VueRouter实例：
export default router;
4. 在main.js中使用Vue Router
src/main.js：
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 导入上面刚创建的VueRouter实例——routerVue.config.productionTip = false;new Vue({router, // 将router传递给Vue实例，这样Vue实例就能使用VueRouter插件提供的功能了render: (h) => h(App),
}).$mount('#app');
5. 上述设置实现了以下目标：
-
定义路由规则： 通过
const routes定义了应用程序的路由规则，包括路径（path）、名称（name）和对应的组件（component）。 -
创建VueRouter实例： 通过
const router = new VueRouter({ routes })创建了一个VueRouter实例，将路由规则传递给它。 -
在Vue实例中使用VueRouter： 在
main.js文件中，通过import router from './router';导入了VueRouter实例，并将其传递给Vue实例的router选项中，使得整个应用能够使用Vue Router插件。 -
在组件中使用路由： 当用户访问特定路径时，Vue Router会根据定义的路由规则，动态加载相应的组件，并在页面中显示。这样，你可以在不同的路由下展示不同的内容，实现页面之间的切换。
