Vue路由模块化的实现方法

分享一个Vue路由模块化方法，简单实用，好用到飞起

 

路由模块化

1.router/index.js  配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './home'  //路由模块
import order from './order'  //路由模块

Vue.use(VueRouter)

const routes = [
  //首页
  home,

  //订单模块
  order,

  //首次加载时先走登录页
  {
    path: '/login',
    name: 'login',
    component: () => {
      return import("@/views/login.vue")
    }
  },

  //路由重定向
  {
    path: '/',
    redirect: "/login"
  }
]

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

export default router


2.router/order.js  有子路由
/**
 * 订单路由
 */
export default {
    path: '/order',
    name: 'order',
    component: function () {
        return import('@/views/order/index.vue')
    },
    //子路由
    children: [{
        path: '/orderlist',
        name: 'orderlist',
        component: function () {
            return import('@/views/order/orderList.vue')
        },
    }]
}

3.router/home.js  无子路由
/**
 * 首页路由
 */
export default {
    path:"/home",
    name:"home",
    component:()=> {
        return import("../views/home/index.vue")
    }
}



4.main.js 

import Vue from 'vue'
import App from './App.vue'
import router from './router'  //引入路由
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')
5.App.vue
注： <router-view></router-view>一定要写在App.vue页面
<template>
  <div class="app" v-if="isRouterAlive">
    <el-container>
      <!-- 头部 -->
      <el-header v-if="routeData.indexOf($route.name) === -1">后台管理系统</el-header>
      <!-- 左侧菜单 -->
      <el-container>
        <el-aside width="200px" v-if="routeData.indexOf($route.name) === -1">
          <!-- 菜单组件 -->
          <Menu />
        </el-aside>
        <!-- 内容部分 -->
        <el-main id="main">
        <!-- 展示路由 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Menu from "@/components/element/Menu";
export default {
  name: "app",
  provide() {
    // 注册一个方法
    return {
      reload: this.reload, //  页面刷新
    };
  },
  data() {
    return {
      //需要占满整个屏幕的路由
      routeData: ["login", "404Error", "network"],
      isRouterAlive: true,
    };
  },
  components: {
    Menu,
  },
  methods: {
    //刷新功能
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  font-size: 0.16rem;
  .main {
    font-size: 0.16rem;
  }
}
.el-header {
  color: #333;
  text-align: center;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #3dedbe;
}

.el-aside {
  color: #333;
  height: calc(100vh - 0.6rem);
  background-color: #d3dce6;
}

.el-main {
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #ffffff;
  height: calc(100vh - 0.6rem);
}
</style>


 


 


 


@[TOC](分享一个Vue路由模块化方法，简单实用，好用到飞起)
# 路由模块化### 1. router/index.js“`jsimport Vue from ‘vue’import VueRouter from ‘vue-router’import home from ‘./home’  //路由模块import order from ‘./order’  //路由模块
Vue.use(VueRouter)
const routes = [  //首页  home,
  //订单模块  order,
  //首次加载时先走登录页  {    path: ‘/login’,    name: ‘login’,    component: () => {      return import(“@/views/login.vue”)    }  },
  //路由重定向  {    path: ‘/’,    redirect: “/login”  }]
const router = new VueRouter({  mode: ‘history’,  base: process.env.BASE_URL,  routes})
export default router“`### 2. router/home.js  无子路由“`js/** * 首页路由 */export default {    path:”/home”,    name:”home”,    component:()=> {        return import(“../views/home/index.vue”)    }}“`### 3. router/order.js  有子路由“`js/** * 订单路由 */export default {    path: ‘/order’,    name: ‘order’,    component: function () {        return import(‘@/views/order/index.vue’)    },    //子路由    children: [{        path: ‘/orderlist’,        name: ‘orderlist’,        component: function () {            return import(‘@/views/order/orderList.vue’)        },    }]}“`### 4.main.js“`jsimport Vue from ‘vue’import App from ‘./App.vue’import router from ‘./router’  //引入路由import store from ‘./store’
Vue.config.productionTip = false
new Vue({  router,  store,  render: function (h) { return h(App) }}).$mount(‘#app’)“`### 5.App.vue
注：“ <router-view></router-view>“一定要写在App.vue页面“`js<template>  <div class=”app” v-if=”isRouterAlive”>    <el-container>      <!– 头部 –>      <el-header v-if=”routeData.indexOf($route.name) === -1″>后台管理系统</el-header>      <!– 左侧菜单 –>      <el-container>        <el-aside width=”200px” v-if=”routeData.indexOf($route.name) === -1″>          <!– 菜单组件 –>          <Menu />        </el-aside>        <!– 内容部分 –>        <el-main id=”main”>        <!– 展示路由 –>          <router-view></router-view>        </el-main>      </el-container>    </el-container>  </div></template>
<script>import Menu from “@/components/element/Menu”;export default {  name: “app”,  provide() {    // 注册一个方法    return {      reload: this.reload, //  页面刷新    };  },  data() {    return {      //需要占满整个屏幕的路由      routeData: [“login”, “404Error”, “network”],      isRouterAlive: true,    };  },  components: {    Menu,  },  methods: {    //刷新功能    reload() {      this.isRouterAlive = false;      this.$nextTick(function () {        this.isRouterAlive = true;      });    },  },};</script>
<style lang=”less” scoped>.app {  font-size: 0.16rem;  .main {    font-size: 0.16rem;  }}.el-header {  color: #333;  text-align: center;  height: 0.6rem;  line-height: 0.6rem;  background-color: #3dedbe;}
.el-aside {  color: #333;  height: calc(100vh – 0.6rem);  background-color: #d3dce6;}
.el-main {  margin: 0;  padding: 0;  color: #333;  background-color: #ffffff;  height: calc(100vh – 0.6rem);}</style>“`
**以上就是路由模块化的写法 自己总结的经验 若有不足 请大神指点**

		  				

		  				

													


						
							

							
																
Tags:      

																

								

							

						
						
						


						 

							
					

					    
									

													

													
											


			


			


	

		
VirMach 便宜 VPS
 


QNews
 
QNews