其实就是对路由配置和实例化的过程进行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. ECDSA host key for 192.168.0.101 has changed and you have requested strict checking.

    原文地址:http://blog.csdn.net/ausboyue/article/details/52775281 Linux SSH命令错误:ECDSA host key "ip地址& ...

  2. MySQL 8.0.13 下载安装教程

    MySQL是使用最多的数据库,自己电脑上肯定要装一个来多加学习,自己搞不懂的一些东西要多写一些 sql 语句练习. 首先去 mysql 官网下载,地址:https://dev.mysql.com/do ...

  3. 1. cocos creator 连接服务端

    客户端向服务端发送 请求: this.network.send("/////",)  上面这段代码要写在logic.js中,(关于服务端的东西全部扔到logic中): ////中写 ...

  4. 《构建之法》chapter5,6 读书心得

    <构建之法>第五章用体育运动等团队例子引出软件开发团队的形式,用更加生活化.形象化的例子让读者更能理解软件开发团队的形式.软件团队形式多样,适用于不同的人员与需求.团队可能会演变的模式有: ...

  5. UT源码 105032014098

    package exam1; import java.util.Scanner; public class test01 { static String nextDate(int year,int m ...

  6. Android Studio删除依赖

    遇到报错 就是要删 ①在build.gradle中删除对应依赖代码(注释了,但是没用??) ②检查工程中的依赖 点击"file">>“project structure ...

  7. bugku 密码学一些题的wp

    ---恢复内容开始--- 1.滴答滴 摩斯密码,http://tool.bugku.com/mosi/ 2.聪明的小羊 从提示猜是栅栏密码,http://tool.bugku.com/jiemi/ 3 ...

  8. 13. Forensics (取证 4个)

    Maltego是一个取证和数据挖掘应用程序. 它能够查询各种公共数据源,并以图形方式描绘人员,公司,网站和文档等实体之间的关系. Maltego也是一个开源智能,但不是开源软件. Helix The ...

  9. 序列化、time、random、hashlib、sys模块

    •很多常用和内置模块,我们只需要掌握他们的用法而暂时不用考虑内部是如何实现的,这些模块大大提升了开发效率 ! 1.json模块与pickle模块 •json 如果你有这样的困扰,当希望把一种数据存到硬 ...

  10. Spark源码系列:DataFrame repartition、coalesce 对比

    在Spark开发中,有时为了更好的效率,特别是涉及到关联操作的时候,对数据进行重新分区操作可以提高程序运行效率(很多时候效率的提升远远高于重新分区的消耗,所以进行重新分区还是很有价值的).在Spark ...