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

Vue路由模块化的实现方法的更多相关文章

  1. Vue 路由模块化配置

    博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...

  2. vue 路由模块化

    第一. 在 router 文件夹下 新建个个模块的文件夹,存放对应的路由js文件 如图1: 第二.修改router文件夹下的index.js  如图2 三.在main.js 修改如下代码 图3

  3. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  4. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...

  5. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  6. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  7. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  8. 初印象至Vue路由

    初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...

  9. vue进阶:vue-router(vue路由)的安装与基本使用

    vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...

随机推荐

  1. UltraISO制作系统安装盘

    转载自: 原文链接 本文介绍使用UltraISO(软碟通)制作U盘启动来安装Win10系统,会装win10,其他的系统也大同小异,适用于当原系统损坏.崩溃.升级异常导致系统不能开机时重装,相对比< ...

  2. Python机器学习——预测分析核心算法PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书

    点击获取提取码:7qi1 在学习和研究机器学习的时候,面临令人眼花缭乱的算法,机器学习新手往往会不知所措.本书从算法和Python语言实现的角度,帮助读者认识机器学习. 本书专注于两类核心的" ...

  3. 07 . ELK Stack一键多机部署脚本

    一键部署脚本 目录结构 tree Log_Analysis_Platform_Document Log_Analysis_Platform_Document ├── InstallES.sh ├── ...

  4. 当asp.net core偶遇docker二(打造个人docker镜像)

    网络上的docker容器总有一些不尽人意的感觉,这个时候,就需要自己diy一个自用的. 比如我们想在163的mysql 5.7内diy一下,结果发现,这个不带vim,我想改造一个自用的mysql镜像, ...

  5. ios 生成字母加数字的随机数

    文章来自:http://blog.csdn.net/baidu_25743639/article/details/73801700 近期项目第三方登录之后默认创建账号和密码,就用随机数生产,这里只需要 ...

  6. ASP.NET Core Logging Solution

    Serilog.Extensions.Logging.File This package makes it a one-liner - loggerFactory.AddFile() - to con ...

  7. python 版本 jaeger-client 导入失败 jaeger-client-python

    环境为: OS: ubuntu18.04 Python: 3.6 问题原因: 尝试使用 jaeger-client-python,官方给出的示例(https://github.com/jaegertr ...

  8. JavaScript小游戏实例:简单的键盘练习

    键盘是一种常用的输入设备,灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功.下面我们编写一个简单的键盘练习游戏. 1.刺破气泡交互式小动画 在编写简单的键盘练习游戏之前,先设计一个简单地刺破气 ...

  9. 每日一道 LeetCode (10):搜索插入位置

    每天 3 分钟,走上算法的逆袭之路. 前文合集 每日一道 LeetCode 前文合集 代码仓库 GitHub: https://github.com/meteor1993/LeetCode Gitee ...

  10. C#LeetCode刷题-脑筋急转弯

    脑筋急转弯篇 # 题名 刷题 通过率 难度 292 Nim游戏   62.5% 简单 319 灯泡开关   31.8% 中等 777 在LR字符串中交换相邻字符   21.9% 中等