vue多页面应用开发

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.config.productionTip = false;

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

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

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<!-- views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<!-- views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

解释说明

1. main.js:

   • 引入了 Vue 和 VueRouter，并注册了 VueRouter。
   • 定义了路由配置 routes，包含两个页面：Home 和 About。
   • 创建了一个 VueRouter 实例，并将其挂载到根实例中。

2. App.vue:

   • 包含一个导航栏，使用 <router-link> 组件来创建导航链接。
   • 使用 <router-view> 来渲染当前路由匹配的组件。

3. Home.vue 和 About.vue:

   • 分别定义了两个简单的页面组件，每个组件都包含一个标题。

通过这种方式，你可以轻松地在 Vue 中实现多页面应用。