配置抽离路由文件

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

本文介绍了Vue.js项目中路由配置的细节，包括在home.js中导入并定义homeRouter，然后在index.js中引入并组合多个路由模块，最后使用VueRouter创建和导出路由器实例。通过这种方式，实现了页面路由的历史模式，并设置了路由基路径。

配置抽离路由文件

//这是router下面的home.js文件
import Home from '../views/home.vue'
const homeRouter = {
		path : '/home',
		name : 'Home',
		component: Home
}
`export default homeRouter


//这是router下面的index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'

import homeRouter from './home'
import moreRouter from './more'
import classificationRouter from './classification'

Vue.use(VueRouter)

const routes = [
      homeRouter,
      moreRouter,
      classificationRouter,
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router