vue-03-路由-路由抽离

之前的博文，写的路由都是直接引入在 main.js 文件内部，而main.js 内部还需要引入其他的文件，这就不可避免的造成了main.js内部文件过大，代码过于臃肿，所以，我们需要将引入的路由抽离出来，直接在main.js内部引用这个文件，这样可以大大的缩减main.js内部的代码量

1、新建router.js文件，将路由全部引入这个文件中

//一级路由引入
import Home from './components/Home'
import Menu from './components/Menu'
import Login from './components/Login'
import Register from './components/Register'
import Admin from './components/Admin'
import About from './components/about/About'

//二级路由引入
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'

//三级路由引入
import Phone from './components/about/Contact/Phone'
import PersionName from './components/about/Contact/PersionName'

export const routes = [                       //配置路由
    { path: '/', name:"indexLink", component: Home },
    { path: '/menu', name:"menuLink", component: Menu },
    { path: '/login', name:"loginLink", component: Login },
    { path: '/register', name:"registerLink", component: Register },
    { path: '/admin', name:"adminLink", component: Admin },
    { path: '/about', name:"aboutLink", redirect: "/about/contact", component: About ,children:[
      { path: '/about/contact', name:'contactLink' ,redirect:"/about/contact/phoneLink", component: Contact ,children:[
        { path: '/about/contact/phoneLink',name:"phoneLink", component: Phone },
        { path: './persionNameLink',name:"persionNameLink", component: PersionName }
      ]},
      { path: '/delivery', name:'deliveryLink' , component: Delivery },
      { path: '/history', name:'historyLink' , component: History },
      { path: '/orderingGuide', name:'orderingGuideLink' , component: OrderingGuide },
    ]},
    { path: '*', redirect:  "/menu" },
  ]

 但是，需要注意的是，我们将路由文件单离出来放在 routes.js 之后，在mian.js 是不能直接引用的，因为我们还没有释放这个 配置的路由，所以，在配置路由的 const 声名之前，添加 export 来释放已配置的路由，使其可以全局调用

2、在main.js内部调用该 路由文件 使用的也是 import 引入的方法

import Vue from 'vue'

import VueRouter from 'vue-router'   

import App from './App'

import  routes  from './routes'       //引入路由文件


Vue.config.productionTip = false

Vue.use(VueRouter)                    //使用路由


const router = new VueRouter({        //实例化路由对象，将routes配置的路由放进去
  routes,                             //传递routes路由数组
  mode : "history"                    //干掉浏览器#
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,     //将 路由 挂载到根实例对象中 需要通过router 配置参数注入路由
  components: { App },
  template: '<App/>'
})

3、如果是侧边菜单栏的话，可以这样组成路由文件

3.1、在src目录下，新建一个routers文件夹，该文件夹下，新建一个index.js文件，用来盛放所有路由

3.2、对于左侧的菜单，可以针对每个菜单新建一个路由文件，然后将这个菜单的二级、三级路由，全部引入到这个文件，然后export 将其暴露出来

import Container from "@/layout/container"

const servicePage = [
  {
    path: "/businessmanage",
    component: Container,
    meta: {
      title: "企业管理",
      icon: "el-icon-s-claim",
      menuShow: true
    },
    children: [
      {
        path: "/businessmanage",
        component: () => import("@/views/Businessmanage/Businessmanage"),
        name: "企业信息",
        meta: {
          title: "企业信息"
        },
        show: true
      },
      {
        path: "/businesslist",
        component: () => import("@/views/Businessmanage/Businesslist"),
        name: "企业账户列表",
        meta: {
          title: "企业账户列表"
        },
        show: true
      },
      {
        path: "/balancelist",
        component: () => import("@/views/Businessmanage/balancelist.vue"),
        name: "账户余额列表",
        meta: {
          title: "账户余额列表"
        },
        show: true
      },
      {
        path: "/graderank",
        component: () => import("@/views/Businessmanage/graderank.vue"),
        name: "企业等级配置",
        meta: {
          title: "企业等级配置"
        },
        show: true
      }
    ]
  }
]

export default servicePage

3.3、对于每个菜单，都新建一个文件，且每个文件都将其暴露出来，以供引用

3.4、在index.js文件中，引入这些文件，作为二级路由，在children中引入，且 使用数组扩展运算符，将其展开。将组合的路由数组，暴露出来

import Vue from "vue"
import Router from "vue-router"
import Layout from "@/layout/Layout"
import HomePage from "./modules/home"
import Dataversion from "./modules/dataversion"
import management from "./modules/management"
import Franchisee from "./modules/franchisee"
import order from "./modules/order"
import marketTools from "./modules/marketTools"
import subCommission from "./modules/subCommission"
import setup from "./modules/setup"

// 重写push方法 解决重复点击相同路由报错
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location)
}

Vue.use(Router)
export const constantRouterMap = [
  {
    path: "/",
    redirect: "/home",
    component: Layout,
    children: [...HomePage, ...management, ...Franchisee, ...Dataversion, ...order, ...setup, ...marketTools, ...subCommission],
    hidden: true
  }
]

const router = new Router({
  mode: "history",
  routes: constantRouterMap
})

export default router

3.5、在main.js文件中，引入这个index.js文件，且挂载到根组件上，

import Vue from "vue"
import App from "./App.vue"
import router from "./router/index"
import store from "./store"
import "@/assets/iconfont/iconfont.css"
import "@/style/index.less"
import "./permission"

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")

这样就完成了路由抽离成单文件，然后组合成一个完整的路由数组，将该路由数组挂载到app根组件上，使其可以全局调用路由