分享一个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. sscanf,sprintf(思修课的收获)

    转载的,就是做个笔记 sprintf函数原型为 int sprintf(char *str, const char *format, ...).作用是格式化字符串,具体功能如下所示: (1)将数字变量 ...

  2. PHP curl_multi_setopt函数

    (PHP 5 >= 5.5.0) curl_multi_setopt — 设置一个批处理cURL传输选项. 说明 bool curl_multi_setopt ( resource $mh , ...

  3. Skill 脚本演示 ycNetToPin.il

    https://www.cnblogs.com/yeungchie/ ycNetToPin.il 通过选中一个 instance ,分析与其连接且同时选中的 wire 上含有的 netName ,自动 ...

  4. Latex—参考文献

    在写文章的最后最让我头疼的就是参考文献的问题了.网上的资料也有很多,这里整合了很多资料得出了一个用bib文件的方法. 1.  显示确定参考文献(一句没什么用的废话). 2.  利用谷歌学术(镜像),如 ...

  5. Redis好文章推荐

    文章来源:掘金   作者:敖丙 Redis-避免缓存穿透的利器之BloomFilter <我们一起进大厂>系列- Redis基础 <我们一起进大厂>系列-缓存雪崩.击穿.穿透 ...

  6. 介绍一种 Python 更方便的爬虫代理池实现方案

    现在搞爬虫,代理是不可或缺的资源 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那 ...

  7. [leetcode/lintcode 题解] Google面试题:合法组合

    给一个单词s,和一个字符串集合str.这个单词每次去掉一个字母,直到剩下最后一个字母.求验证是否存在一种删除的顺序,这个顺序下所有的单词都在str中.例如单词是’abc’,字符串集合是{‘a’,’ab ...

  8. java 增强for循环与泛型

    一 增强for循环 增强for循环是JDK1.5以后出来的一个高级for循环,专门用来遍历数组和集合的.它的内部 原理其实是个Iterator迭代器,所以在遍历的过程中,不能对集合中的元素进行增删操作 ...

  9. 如何使 pdf 文件在浏览器里面直接下载而不是打开

    前言 在做需求过程中我们大概率会遇到在浏览器中下载文件的需求,如果仅仅是这个要求的话很简单,有如下两种解决方式. 第一种是通过 window 对象的 open 方法进行操作,将文件 url 直接在浏览 ...

  10. Linux Docker部署

    Docker 安装 卸载旧版docker yum remove docker \ docker-client \ docker-client-latest \ docker-common \ dock ...