Vue路由调用组件，页面出现重复组件怎么解决

Question

 

路由中第一个页面没问题，到第二个页面，第三第四一样的出现下面这个问题

在第二页调用写写好的组件，或者添加内容，都会出现两次

 

不知道怎么回事 ，求大佬解决一下

这是路由的配置

import { createRouter, createWebHistory } from 'vue-router'
const Home  = ()=>import('../views/home/Home');
const Detail  = ()=>import('../views/detail/Detail');
const Profile  = ()=>import('../views/profile/User');
const ShopCart  = ()=>import('../views/shopcart/ShopCart');
const BookSort  = ()=>import('../views/booksort/BookSort');

const routes = [
  {
    path: '',
    name: 'DefaultHome',
    component: Home,
    meta:{
      title:'图书兄弟'
    }
  },
  {
    path: '/Home',
    name: 'Home',
    component: Home,
    meta:{
      title:'图书兄弟-首页'
    }
  },
  {
    path: '/booksort',
    name: 'BookSort',
    component: BookSort,
    meta:{
      title:'图书兄弟--商品分类页'
    }

  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    meta:{
      title:'图书兄弟--商品详情页'
    }
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta:{
      title:'图书兄弟--用户中心页'
    }
  },
  {
    path: '/shopcart',
    name: 'ShopCart',
    component:  ShopCart,
    meta:{
      title:'图书兄弟--购物车页'
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
router.beforeEach((to,from,next)=>{
  //如果没有登录，在这里跳到login
  next();
  document.title=to.meta.title;
})
export default router

Answer 1

看不出来问题，有个疑惑 哈

history: createWebHistory(process.env.BASE_URL), 这行是做什么处理