vue3项目使用router构建多个页面，页面跳转时不刷新就显示空白

Question

页面跳转时只显示这种空白页面，必须点击刷新，才能正确的显示页面内容

控制台报错信息

App.vue代码

<script setup>
import {  RouterView, useRoute } from "vue-router";
import { ref, watch } from "vue";

const route = useRoute();

const state = ref(true);

const a = ref('left');

watch(
  () => route.meta.isTab,
  (newValue, oldValue) => {
    
    if (newValue === false) {
      state.value = false;
    }
    if (oldValue === false) {
      state.value = true;
    }
  }
);

watch(
  () => route.meta.index,
  (newValue, oldValue) => {
    if (newValue > oldValue) {
      a.value = 'left';
    }
    else if(newValue < oldValue) {
      a.value = 'right';
    }
    else {
      a.value = '';
    }
  }
);
</script>

<template>
  <div class="main">
    <RouterView v-slot="{ Component }">
      <transition :name="a" mode="out-in">
        <component :is="Component"></component>
      </transition>
    </RouterView>
  </div>

  <!-- 下导航 -->
  <div class="footer" v-if="state">
    <Nav></Nav>
  </div>
</template>

<style scoped>
.footer {
  margin-top: 55px;
}

.left-enter-active{
  animation: slideInRight 1s;
}

.left-leave-active{
  animation: slideOutLeft .5s;
}

.right-enter-active{
  animation: slideInLeft 1s;
}

.right-leave-active{
  animation: slideOutRight .5s;
} 
</style>

router/index.js代码

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { useCounterStore } from '@/stores/counter'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },

    {
       path: '/user',
      name: 'user',
       component: () => import('../views/UserView.vue'),
       meta: {
        requireAuth: true,
        
       }
     },
    {
      path: '/search',
      name: 'search',
      component: () => import('../views/SearchView.vue'),
      meta: {
        isTab: false
      }
    },
  ]
})

router.beforeEach((to,from,next)=>{
  const store = useCounterStore();
  const token = store.userId;
  if(to.meta.requireAuth){
    if(token){
      next();
    }
    else{
      next({name: "login"});
    }
  }
  else{
    next();
  }
});

export default router

Answer 1

根据控制台提示，我建议你可以先尝试将代码中的transition组件删除，你看是否页面跳转就正常了

<div class="main">
    <RouterView v-slot="{ Component }">
        <component :is="Component"></component>
    </RouterView>
  </div>