vue多页面路由配置

Vue多页面路由配置是指在Vue项目中同时多个页面的路由。通常情况下，Vue项目是单页面应用（SPA），只有一个入文件和一个路由配置文件。但是有时候我们需要在同一个项目中同时管理多个独立的页面，这时就需要进行多页面路由配置。

在Vue中，可以通过vue-router插件来实现多页面路由配置。下面是一个简单的示例：

1. 首先，在Vue项目的src目录下创建一个pages文件夹，用于存放多个页面的组件。

2. 在src目录下创建一个router文件夹，用于存放路由配置文件。

3. 在router文件夹下创建一个index.js文件，用于配置路由。

4. 在index.js文件中，引入Vue和vue-router，并创建一个新的VueRouter实例。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/page1',
      name: 'Page1',
      component: () => import('@/pages/Page1.vue')
    },
    {
      path: '/page2',
      name: 'Page2',
      component: () => import('@/pages/Page2.vue')
    },
    // 其他页面的路由配置
  ]
})

export default router

5. 在main.js文件中，引入router并将其挂载到Vue实例上。

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

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

在上面的示例中，我们创建了两个页面，分别是Page1和Page2。在路由配置中，我们使用了VueRouter的history模式，并配置了两个路由，分别对应不同的页面组件。