VueJS中是否存在类似PHP require的导航复用实现方式？

Hey Brian, totally feel your pain—having to copy-paste navigation code across every page and then update it everywhere when something changes is such a hassle! Luckily, Vue was designed specifically to solve this kind of code reuse problem, and there are a few straightforward ways to do exactly what you're asking for, similar to PHP's require "navigation.html".

The most Vue-native approach is to turn your navigation bar into a standalone component. Here's how:

Step 1: Build the Navigation Component #

Create a new file called Navigation.vue in your components folder, and drop all your navigation code inside it:

<template>
  <nav class="main-nav">
    <router-link to="/">Home</router-link>
    <router-link to="/products">Products</router-link>
    <router-link to="/about">About Us</router-link>
    <!-- Add all your navigation items here -->
  </nav>
</template>

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

<style scoped>
.main-nav {
  background-color: #2c3e50;
  padding: 1rem 2rem;
}
.main-nav a {
  color: white;
  margin-right: 1.5rem;
  text-decoration: none;
}
.main-nav a:hover {
  color: #3498db;
}
</style>

(Note: I used router-link here since most Vue apps use Vue Router for navigation—if you're not using it, just replace them with regular <a> tags.)

Step 2: Use the Component in Your Pages #

Now, in any page where you want the navigation bar, just import the component and add it to your template:

<template>
  <div class="home-page">
    <Navigation /> <!-- This pulls in your navigation -->
    <h1>Welcome to My Site!</h1>
    <!-- Rest of your page content -->
  </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue'

export default {
  components: {
    Navigation
  }
}
</script>

If you don't want to import the Navigation component in every single page, you can register it globally in your main app file (main.js):

import Vue from 'vue'
import App from './App.vue'
import Navigation from '@/components/Navigation.vue'

// Register the component globally
Vue.component('Navigation', Navigation)

new Vue({
  render: h => h(App)
}).$mount('#app')

Now you can use <Navigation /> in any component or page without importing it first—super convenient!

If your app has a consistent layout (navigation + footer + main content area), you can create a layout component that wraps your page content. This way, you don't even have to add the navigation to each page individually:

Create Layout.vue:

<template>
  <div class="app-layout">
    <Navigation />
    <main class="content-area">
      <slot></slot> <!-- This is where your page content will go -->
    </main>
    <!-- Add a footer here if you want too! -->
  </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue'

export default {
  components: {
    Navigation
  }
}
</script>

Then use it in your pages like this:

<template>
  <Layout>
    <h1>About Our Company</h1>
    <p>We're awesome, here's why...</p>
  </Layout>
</template>

<script>
import Layout from '@/components/Layout.vue'

export default {
  components: {
    Layout
  }
}
</script>

The best part? No matter which method you choose, when you need to update your navigation (add a new link, change styling, etc.), you only have to edit the Navigation.vue file once. All pages using it will automatically get the update—no more hunting down every file to make changes!

内容的提问来源于stack exchange，提问作者Brian Moreno