Vue CLI项目中Footer组件不显示及页面内容异常问题排查

Let’s troubleshoot these issues one by one—they’re common gotchas with Vue components and routing, so we’ll get you sorted quickly.

First, let’s eliminate basic problems with the Footer component itself:

• Check template structure: If you’re using Vue 2, your component needs a single root element (Vue 3 allows multiple, but this is a frequent mistake in Vue 2). For example, if your Footer template has multiple top-level elements:

  <template>
    <p>Copyright 2024</p>
    <div>Social links</div>
  </template>
  

  Wrap them in a single root div to fix it:

  <template>
    <div class="footer-container">
      <p>Copyright 2024</p>
      <div>Social links</div>
    </div>
  </template>
  

• Confirm component registration: When testing the Footer alone, make sure you’ve imported and registered it correctly in your test file. For example:

  <script>
  import Footer from '@/components/Footer.vue'
  
  export default {
    components: {
      Footer
    }
  }
  </script>
  

• Inspect for CSS hiding: Sometimes styles like display: none, visibility: hidden, or position: fixed with off-screen values can make the component invisible even if it’s rendered. Use your browser’s dev tools to check if the Footer element exists in the DOM but isn’t visible.

This is almost always a routing or layout issue with <router-view>—here’s what to check:

• Ensure your layout has <router-view>: If your CMS pages use a shared layout component (like Layout.vue) that includes Navbar and Footer, the middle section must have a <router-view> where your content loads. Example:

  <template>
    <div class="app-layout">
      <Navbar />
      <!-- This is where CMS content will render -->
      <main class="content-wrapper">
        <router-view />
      </main>
      <Footer />
    </div>
  </template>
  

• Check router configuration: Make sure your CMS routes are set up to use the layout with nested routes (the cleanest approach). In router/index.js:

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Layout from '@/components/Layout.vue'
  import CmsHome from '@/components/CmsHome.vue'
  import CmsPosts from '@/components/CmsPosts.vue'
  
  Vue.use(VueRouter)
  
  const routes = [
    {
      path: '/cms',
      component: Layout,
      // Nested routes load inside the layout's <router-view>
      children: [
        { path: '', component: CmsHome }, // Default CMS page
        { path: 'posts', component: CmsPosts }
      ]
    }
  ]
  
  const router = new VueRouter({ routes })
  export default router
  

  If you’re not using nested routes, double-check that your CMS page component includes both the layout elements and the content (but nested routes are better for reusability).
• Validate content components: Ensure your CMS content components (like CmsHome.vue) are properly imported in the router, and their templates are valid (no missing root elements, syntax errors, etc.).

• Use Vue DevTools: Inspect the component tree to see if the Footer or CMS content is being mounted. If it’s not in the tree, it’s a registration/routing issue. If it is there but invisible, it’s a CSS/template problem.
• Check the console: Vue will throw warnings for issues like unregistered components or invalid templates—don’t ignore these!

内容的提问来源于stack exchange，提问作者Jerin Monish