vue-router使用问题，求指导

在做Vue路由的时候有点不会用，希望有vue好的帮忙指点一下。
具体情况是这样，我的页面定义了好几个公共插件 目前是用下面的方式调用的

img

用最基础的调用组件的方法页面可以正常显示，但是再配置路由的地方出了问题，我的文件结构是这样的

img


我将所有公共页面都定义成了组件 想实现在点击导航的时候 不替换公共的header 和footer，只替换其他组件，实现局部刷新页面。

img


导航是这个样子

这是公共头部代码：

img

main.js的代码

img


尝试用很多方法配路由但是失败了 页面一直报错 好像是说找不到 default这个参数 麻烦指导一下

首先，在工程目录src下一级创建router文件夹，在router文件夹内创建index.js文件。
其次，在main.js文件内添加引入路由的配置文件：import router from ‘./router’
第三，就可以开始在index.js文件里开始写路由配置了，以你的截图为参考如下

img

参考这里即可，
https://blog.csdn.net/qq_44737915/article/details/129017518

  • 以下回答由chatgpt基于相关博客总结生成:

    对于路由配置问题，可以按照以下步骤进行解决：

    1. 确认是否已经正确安装了Vue Router，并按照官方文档进行配置。

    2. 在每个路由组件的定义中，使用Vue的内置组件来包裹公共的头部和底部。这样可以保持组件的状态，避免每次切换路由时都重新渲染头部和底部。

    3. 在路由配置中，将需要替换的组件放在标签中，而不是整个页面的容器中。这样就可以实现只替换路由组件，而不替换公共的部分。

    4. 如果需要在导航菜单中设置默认选中的项，则可以使用Vue Router提供的标签，并在标签上使用exact和active-class属性来设置默认选中的样式。

    示例代码：

    <!-- App.vue -->
<template>
  <div>
    <header>
    <!-- 公共头部 -->
    </header>
    <router-view></router-view>
    <footer>
    <!-- 公共底部 -->
    </footer>
  </div>
</template>

<!-- router.js -->
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

<!-- Home.vue -->
<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<!-- main.js -->
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

    对于选项卡切换图片的问题，可以按照以下步骤进行解决：

    1. 在Vue组件中，使用标签来动态切换子组件。通过在父组件中定义一个变量current，来绑定到标签的:is属性，从而控制显示的子组件。

    2. 在每个子组件中，定义需要显示的图片，使用标签将图片显示出来。

    3. 在父组件中，使用组件来设置图片切换时的过渡效果。

    示例代码：

    <template>
  <div class="box">
    <div id="tab">
      <ul id="tab_left">
        <li @mouseover="current='one'"><a href="#">图片1</a></li>
        <li @mouseover="current='two'"><a href="#">图片2</a></li>
        <<li @mouseover="current='three'"><a href="#">图片3</a></li>
        <li @mouseover="current='four'"><a href="#">图片4</a></li>
      </ul>
    </div>
    <div id="tab_content">
      <transition name="fade">
        <component :is="current"></component>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 'one', // 默认显示第一个选项卡的图片
    };
  },
  components: {
    one: {
      template: '<div><img src="./img/1.jpg"></div>',
    },
    two: {
      template: '<div><img src="./img/2.jpg"></div>',
    },
    three: {
      template: '<div><img src="./img/3.jpg"></div>',
    },
    four: {
      template: '<div><img src="./img/4.jpg"></div>',
    },
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>