vue拆分router路由,方便管理

简介: vue拆分router路由,方便管理

1、在router文件下建立一个config.js文件

 const router = {     //定义路由对象
    home: {          //对象形式
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue')
    },
    about: {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    },
    //路由对象 
}
export default router     //导出


2、在次建立一个homeRouter的js文件

import routers from "./config"     //导入路由 
const homeRouter=[       //定义数组
    routers.home,
    routers.about,
    //在config中添加路由就在这里接着写
]
export default homeRouter      //导出

3、router路由下有个默认的index的js文件

import Vue from 'vue'import VueRouter from 'vue-router'import homeRouter from "./homeRouter"      //引入
Vue.use(VueRouter)
const routes = [
  ...homeRouter     //...路由
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router
目录
相关文章
|
2天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
5 0
|
3天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
3天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
14 0
|
3天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
11 0
|
3天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
7 1
|
数据库
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
102 0
基于springboot+mybatisplus+vue的课程学分管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
110 0
基于Springboot+MybatisPlus+Vue的在线课程管理系统
|
JavaScript 前端开发 Java
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
179 0
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
|
JavaScript 开发者
Vue 课程介绍|学习笔记
快速学习 Vue 课程介绍
95 0
|
JavaScript 开发者
Vue课程介绍|学习笔记
快速学习Vue课程介绍
75 0