其实就是对路由配置和实例化的过程进行js封装,挂载路由的时候依然在main.js中;

步骤:

1.在src文件夹下新建一个router文件夹,在router文件夹下新建文件router.js;

2.引入vue实例,把之前配置路由和实例化路由的步骤搬过来;

3.使用export defult  router把路由实例被暴露出去

4.main.js中引用router实例并挂载;

import Vue from 'vue';
import App from './App.vue';
import router from './router/router.js';
//4.挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})//这样main.js的代码界面就清爽多了

注意:封装的时候只把有关路由配置和实例化的过程封装就好,请求数据什么的还放在main.js中;

Vue 路由的模块化的更多相关文章

  1. Vue 路由模块化配置

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

  2. Vue路由模块化的实现方法

    分享一个Vue路由模块化方法,简单实用,好用到飞起 路由模块化 1.router/index.js 配置路由 import Vue from 'vue' import VueRouter from ' ...

  3. Vue路由vue-router

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

  4. 14.vue路由&脚手架

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

  5. 初印象至Vue路由

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

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

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

  7. Vue 路由(对路由页面编写做规范)

    前言 上一篇写了“Vue 路由拦截(对某些页面需要登陆才能访问)” 的博客,此篇是续上篇对路由页面模块化,可以看到之前的路由配置都写在main.js中,真正开发肯定不能都写在main.js,所以我们要 ...

  8. Vue路由-详细总结

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

  9. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

随机推荐

  1. scrapy学习笔记之hello world

    1. 创建项目文档 在目标路径下,打开命令行,使用如下命令创建项目,例如项目名称为 "tutorial": scrapy startproject tutorial - 创建项目时 ...

  2. Python学习之路基础篇--07Python基础+编码、集合 和 深浅Copy

    1 小数据池(节省内存) 只有数字和字符串中内存,储存在同一个内存地址中 数字的范围在-5~256中,字符串有以下两个特点:不能含有特殊字符,还有就s*20 不是同一个地址,而要*21就不是了 2 编 ...

  3. leetcode 764.Largest Plus Sign

    根据题意的话就是在非0的地方开始寻找上下左右分别能够走到的最大步长的. 那么使用暴力的方法竟然leetcode还是给过了. class Solution { public: int orderOfLa ...

  4. UNION ALL 心得

    TABLE_A 表 UNION ALL TABLE_B 表 UNION 或者 UNION ALL 之后 1.字段长度 必须相同  (如A 10 个列,则B 也要10个列) 2.查询条件也要相同  (A ...

  5. zeebe 集成elasticsearch exporter

    zeebe 目前还在一直的开发中,同时一些变动还是挺大的,比如simple monitor 的以前是不需要配置HazelcastExporter的 估计是为了进行集群功能处理,新添加的,以前写的配置基 ...

  6. linux一些工具的安装(三)

    linux(vmware15   centos7)中Docker安装 一.Docker卸载 1.查看已安装的docker安装包 $yum list installed|grep docker 执行后的 ...

  7. VLC播放器

    为了将多个视频放在一个窗口,最开始想用的是windows media player ,6个视频,把整个电脑卡得不动了(显卡太弱,是多输出口的,没法换),于是又想把视频压缩成一个,网上的大部分软件要收费 ...

  8. http请求返回响应码及意义

    http 响应码及意义 HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到RFC 2518.RFC 281 ...

  9. office 32-bit components 2010 的卸载

    卸载方法:MsiExec.exe /X {90140000-0043-0000-1000-0000000FF1CE}

  10. 黄聪:原生js的音频播放器,兼容pc端和移动端(原创)

    更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...