Vue路由跳转-页面显示空白

跳转页面，指定路径跳转到某个页面时，如果没有按照正确的方式写路径，会导致页面显示空白

html部分

   方法1、
  <div class="nav-item-1" @click="navitem">拼团专区</div>
   方法2、
  <router-link class="nav-item-2" to="/navitem">秒杀活动</router-link>
  

js部分

 methods: {
    //拼团专区页面
    navitem() {
      this.$router.push({
        
      // path: "../views/HomePro/GroupBooking", //1、跳转的页面路径---此路径跳到页面时会显示空白页面

      // name: "GroupBooking",//2、跳转的页面路径

       path: "/GroupBooking", //3、跳转的页面路径
      
      });
    },

router.js部分------------ Vue.use(VueRouter)

{
    path: '/GroupBooking',//拼团专区
    name: 'GroupBooking',
    meta: {
      index: 1
    },
    component: () => import(/* webpackChunkName: "groupbooking" */ '../views/HomePro/GroupBooking.vue'),
  },