分享一个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>```
**以上就是路由模块化的写法 自己总结的经验 若有不足 请大神指点**