Vue项目实现导航 切换以及相关文件配置

目录

一、实现导航切换涉及的文件

 二、代码示例

在 router/index.js 中配置路由信息：

创建 Page1.vue 和 Page2.vue 文件，分别表示两个页面的内容。

在需要触发导航的组件中，添加导航代码，例如

---

 

一、实现导航切换涉及的文件

在一个 Vue 项目中，导航切换两个页面通常涉及到以下几个文件来实现：

1. 路由配置文件（router/index.js）：在该文件中配置路由信息，定义路径和对应的组件。你需要确保在这里配置了你想要导航切换的页面对应的路由信息。

2. 组件文件（.vue 文件）：每个页面通常对应一个.vue文件，其中包含页面的模板、样式和行为逻辑。你需要确保你的两个页面分别有对应的.vue文件。

3. 导航触发代码：导航一般是通过用户的交互来触发的，比如点击按钮、链接或者其他事件。在你的组件中，你需要添加触发导航的代码，可以是使用 router-link 组件或者编程式导航的方式。

 二、代码示例

1. 在 router/index.js 中配置路由信息：
    

   import Vue from 'vue';
   import Router from 'vue-router';
   import Page1 from '@/components/Page1.vue';
   import Page2 from '@/components/Page2.vue';
   
   Vue.use(Router);
   
   export default new Router({
     routes: [
       {
         path: '/page1',
         name: 'Page1',
         component: Page1,
       },
       {
         path: '/page2',
         name: 'Page2',
         component: Page2,
       },
     ],
   });
   

2. 创建 Page1.vue 和 Page2.vue 文件，分别表示两个页面的内容。

3. 在需要触发导航的组件中，添加导航代码
    

   <template>
     <div>
       <button @click="navigateToPage1">Go to Page 1</button>
       <button @click="navigateToPage2">Go to Page 2</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       navigateToPage1() {
         this.$router.push({ name: 'Page1' });
       },
       navigateToPage2() {
         this.$router.push({ name: 'Page2' });
       },
     },
   };
   </script>
   

   在这个示例中，点击按钮会触发导航到对应的页面。你可以根据你的具体需求和代码结构进行调整。