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>```
**以上就是路由模块化的写法 自己总结的经验 若有不足 请大神指点**
Vue路由模块化的实现方法的更多相关文章
- Vue 路由模块化配置
博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...
- vue 路由模块化
第一. 在 router 文件夹下 新建个个模块的文件夹,存放对应的路由js文件 如图1: 第二.修改router文件夹下的index.js 如图2 三.在main.js 修改如下代码 图3
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由的异步加载(懒加载)方法
vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router 阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- 初印象至Vue路由
初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...
- vue进阶:vue-router(vue路由)的安装与基本使用
vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...
随机推荐
- UltraISO制作系统安装盘
转载自: 原文链接 本文介绍使用UltraISO(软碟通)制作U盘启动来安装Win10系统,会装win10,其他的系统也大同小异,适用于当原系统损坏.崩溃.升级异常导致系统不能开机时重装,相对比< ...
- Python机器学习——预测分析核心算法PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书
点击获取提取码:7qi1 在学习和研究机器学习的时候,面临令人眼花缭乱的算法,机器学习新手往往会不知所措.本书从算法和Python语言实现的角度,帮助读者认识机器学习. 本书专注于两类核心的" ...
- 07 . ELK Stack一键多机部署脚本
一键部署脚本 目录结构 tree Log_Analysis_Platform_Document Log_Analysis_Platform_Document ├── InstallES.sh ├── ...
- 当asp.net core偶遇docker二(打造个人docker镜像)
网络上的docker容器总有一些不尽人意的感觉,这个时候,就需要自己diy一个自用的. 比如我们想在163的mysql 5.7内diy一下,结果发现,这个不带vim,我想改造一个自用的mysql镜像, ...
- ios 生成字母加数字的随机数
文章来自:http://blog.csdn.net/baidu_25743639/article/details/73801700 近期项目第三方登录之后默认创建账号和密码,就用随机数生产,这里只需要 ...
- ASP.NET Core Logging Solution
Serilog.Extensions.Logging.File This package makes it a one-liner - loggerFactory.AddFile() - to con ...
- python 版本 jaeger-client 导入失败 jaeger-client-python
环境为: OS: ubuntu18.04 Python: 3.6 问题原因: 尝试使用 jaeger-client-python,官方给出的示例(https://github.com/jaegertr ...
- JavaScript小游戏实例:简单的键盘练习
键盘是一种常用的输入设备,灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功.下面我们编写一个简单的键盘练习游戏. 1.刺破气泡交互式小动画 在编写简单的键盘练习游戏之前,先设计一个简单地刺破气 ...
- 每日一道 LeetCode (10):搜索插入位置
每天 3 分钟,走上算法的逆袭之路. 前文合集 每日一道 LeetCode 前文合集 代码仓库 GitHub: https://github.com/meteor1993/LeetCode Gitee ...
- C#LeetCode刷题-脑筋急转弯
脑筋急转弯篇 # 题名 刷题 通过率 难度 292 Nim游戏 62.5% 简单 319 灯泡开关 31.8% 中等 777 在LR字符串中交换相邻字符 21.9% 中等