VueJS组件未渲染排查：访问/login、/signup时组件不加载

Hey Boris, let's break this down step by step—since your default Hello component loads properly, the core router setup is working, but there's a small misconfiguration or oversight keeping your login/signup components from rendering. Here’s where to start your debugging:

1. Verify Your Router Configuration (router/index.js) #

First, double-check that you’ve properly defined the routes for /login and /signup, and imported the components correctly. Common mistakes here include typos in paths, missing component imports, or incorrect router instance setup.

Example of a correct setup:

// Make sure components are imported correctly (check file paths!)
import Hello from '@/components/Hello.vue'
import Login from '@/components/Login.vue'
import Signup from '@/components/Signup.vue'

const routes = [
  { path: '/', component: Hello },
  // Confirm paths match exactly what you’re accessing, and components are assigned
  { path: '/login', component: Login },
  { path: '/signup', component: Signup }
]

// Ensure you’re creating and exporting the VueRouter instance
const router = new VueRouter({
  routes // Don’t mistype this as "route" (singular)
})

export default router

2. Confirm the Router is Mounted to Your Vue Instance #

Check your main.js file to make sure you’re importing the router and passing it to the root Vue instance. Without this, the router won’t be active at all:

import Vue from 'vue'
import App from './App.vue'
import router from './router' // Import the router

Vue.config.productionTip = false

new Vue({
  router, // Critical: This mounts the router to your app
  render: h => h(App)
}).$mount('#app')

3. Check Route Mode and Path Format #

If you’re using history mode (no # in URLs), you need proper server fallback configuration—but if you haven’t set that up, accessing /login might hit a 404 (though you said no console errors, so this is less likely). Test by manually adding # to the URL (e.g., http://localhost:8080/#/login):

• If this loads the component, you’re using hash mode (default) but accessing the path without the #.
• If you want history mode, you’ll need to configure your dev server (e.g., for Vue CLI, add publicPath: '/' to vue.config.js and set up server rewrites).

4. Simplify Your Login/Signup Components to Rule Out Internal Errors #

Sometimes components fail silently due to syntax errors, missing dependencies, or invalid template code. Temporarily replace your Login.vue with a minimal working version:

<template>
  <div class="login">
    <h1>Login Component Loaded!</h1>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

If this loads when you visit /login, the issue is in your original component code—start reintroducing parts of it to find the breaking point.

5. Check Route Matching Priority #

If you have a catch-all route (e.g., { path: '*', component: NotFound }), make sure it’s defined after your /login and /signup routes. Routes are matched in order, so a catch-all placed first will override more specific paths.

6. Ensure <router-view> is Visible in App.vue #

Your App.vue code looks correct with <router-view/>, but double-check that it’s not being hidden by CSS (e.g., a parent element with display: none or visibility: hidden). Add a temporary style to confirm:

<template>
  <div id="app">
    <router-view style="border: 2px solid red; padding: 1rem;"/>
  </div>
</template>

If the red border appears but no content, the router is trying to render the component but the component itself is failing. If the border doesn’t appear, there’s an issue with the router mounting.

内容的提问来源于stack exchange，提问作者Boris K