vue多页面怎么搭建

搭建 vue 多页面应用需遵循以下步骤：使用 vue cli 创建项目添加路由配置创建页面组件在 app.vue 中集成路由占位符运行应用启动开发服务器

Vue 多页面搭建

如何搭建 Vue 多页面应用？

搭建 Vue 多页面应用需要遵循以下步骤：

1. 创建新项目

使用 Vue CLI 创建一个新的 Vue 项目：

<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a> create my-multipage-app

登录后复制

2. 添加路由

在 router/index.js 中添加路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

export default router

登录后复制

3. 创建页面组件

为每个页面创建一个单独的 Vue 组件：

// Home.vue
<template><h1>Home</h1>
</template><script>
export default {
  name: 'Home'
}
</script>

// About.vue
<template><h1>About</h1>
</template><script>
export default {
  name: 'About'
}
</script>

登录后复制

4. 集成到 App.vue

在 App.vue 中，使用 作为页面占位符：

<template><p id="app">
    <nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view></router-view>
</p>
</template>

登录后复制

5. 运行应用

运行 npm run serve 或 yarn serve 启动开发服务器，应用将针对多个页面进行路由。

以上就是vue多页面怎么搭建的详细内容，更多请关注叮当号网其它相关文章！