其实就是对路由配置和实例化的过程进行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. edfread源码

    function [hdr, record] = edfread(fname, varargin) % Read European Data Format file into MATLAB % % [ ...

  2. 转 深入理解net core中的依赖注入、Singleton、Scoped、Transient

    出处:http://www.mamicode.com/info-detail-2200461.html 一.什么是依赖注入(Denpendency Injection) 这也是个老身常谈的问题,到底依 ...

  3. 使用min-device-pixel-ratio媒体功能实现真正的1像素border

    关于设备像素比的知识,想必做过移动端开发的都有接触,这里就不介绍啦,万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍 由于设备像素比存在的原因,我们在处理设计图的一些边 ...

  4. 整合spring+springmvc+mybatis

    开发环境: jdk 1.8 eclipse 4.7.0 (Oxygen) tomcat 8.5.29 mysql 5.7 开发前准备: spring 框架的jar包,在这里使用的是spring-5.0 ...

  5. 关于E-R图

    E-R图 简介: E-R图也称实体-联系图(Entity Relationship Diagram),提供了表示实体类型.属性和联系的方法.用来描述现实世界的概念模型.它是描述现实世界概念结构模型的有 ...

  6. 523. Continuous Subarray Sum

    class Solution { public: bool checkSubarraySum(vector<int>& nums, int k) { unordered_map&l ...

  7. 真tm郁闷

    昨天这时还是信心满满,今天这时就已经彻底颓了. 感觉这次是最接近的了,4个题目都做出来了,怎么还会fail,那边也不说为什么,到底是哪里不足,尽说些没用的. 前后都当了4次炮灰了,以后也不会再冲动了, ...

  8. python的xml模块用法

    xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融行业的很多系统的 ...

  9. java8_api_正则表达式

    正则表达式    什么是正则表达式    使用String类中的replaceAll方法    使用Pattern类编译正则表达式    使用Matcher类匹配正则表达式 什么是正则表达式      ...

  10. C 语言经典例子

    1. 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #inc ...