其实就是对路由配置和实例化的过程进行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. LeetCode第一次刷题

    感觉自身编程水平还是差很多,所以刷刷题 LeetCode貌似是一个用的人比较多的题库,下面是第一题 给数组和目标和求需要元素的下标 public class Solution { public int ...

  2. hyperscan在低版本系统应用问题

    编译环境:centos6.3 32位/64位 由于hyperscan使用许多C++11特性,在低版本系统gcc版本不能编译.后来发现在runtime时也就是hs_scan时只需要依赖libhs_run ...

  3. 初用jdbc来运行事务

    dao层 public Connection getConnection() throws Exception { Class.forName(driver); if (con == null || ...

  4. npm install 插件 --save与 --save -dev的区别

    npm i 插件   ,会把插件安装到node_modules目录中,不会修改package.json, npm i 插件 --save  ,项目发布上线之后还会依赖用到的插件,没有这些插件,项目不能 ...

  5. zznuoj 1195 : 猴子选大王(结构体专题)

    题目描述 n只猴子围坐成一个圈,按顺时针方向从1到n编号.然后从1号猴子开始沿顺时针方向从1开始报数,报到m的猴子出局,再从刚出局猴子的下一个位置重新开始报数,如此重复,直至剩下一个猴子,它就是大王. ...

  6. mysql的分表与分区的区别

    http://www.2cto.com/database/201503/380348.html

  7. AssetBundle-----资源包划分

    资源包划分 经常更新的资源放在一个单独的包里面,跟不经常更新的包分离;需要同时加载的资源放在一个包里面;其他包共享的资源放在一个单独的包里面;需要同时加载的小资源打包成一个包;对于一个同一个资源有两个 ...

  8. Python变量和常量

    1.什么是变量 变量:核心在于变和量儿字,变->变化,量->状态如何定义? x=1 变量名 变量赋值符号:= 变量值:1 其中变量名又称为标识符: 1. 可以是字母,数字,下划线的任意组合 ...

  9. vue day5 分页控件

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. Go实例解析

    Go语言包的加载顺序如图 可以通过如下实例详细了解 代码来源于<Go实战> 代码地址:https://github.com/goinaction/code 项目代码结构 程序架构 首先分析 ...