vfp网站开发,国家林业建设工程协会网站,盐城整站优化,网站设计与规划作业1. 安装Vue Router
npm install vue-router
2. 创建Home.vue组件
在 src/views 目录下创建一个名为 Home.vue 的文件#xff1a;
!-- template 标签是Vue组件的模板部分#xff0c;其中包含了组件的HTML结构。 --
templatedivh1…1. 安装Vue Router
npm install vue-router
2. 创建Home.vue组件
在 src/views 目录下创建一个名为 Home.vue 的文件
!-- template 标签是Vue组件的模板部分其中包含了组件的HTML结构。 --
templatedivh1Welcome to Nano Antibody Data Retrieval!/h1!-- Add your content here --/div/templatescriptexport default {name: Home,// Add your component logic here};/scriptstyle 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会根据定义的路由规则动态加载相应的组件并在页面中显示。这样你可以在不同的路由下展示不同的内容实现页面之间的切换。
