Vue 路由的模块化

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

转载于:https://www.cnblogs.com/changedman/p/9227518.html

Vue 路由的模块化相关推荐

Vue 路由模块化配置
博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化分享两个解决方案 -- Vue 路由配置 ...
vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？
大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...
14.vue路由脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({mode:"history/hash", ...
视频教程-德国Vue.js2终极开发教程（含Vue路由和Vuex）-Vue
德国Vue.js2终极开发教程(含Vue路由和Vuex) * Academind GmbH创始人,当前生活在德国慕尼黑 * 从15岁开始进入开发领域,前后端技术均很精通,毕业于慕尼黑大学硕士学位 * ...
德国Vue.js2终极开发教程（含Vue路由和Vuex）-Max-专题视频课程
德国Vue.js2终极开发教程(含Vue路由和Vuex)-808人已学习课程介绍新手入门现代前端开发的不二选择课程目标: * 学会从简单到复杂企业级应用的VueJS程序编写方法 ...
vue路由模板是html,vue-router 详解
文章目录 1.认识vue-router 2.安装和使用vue-router 3.路由的默认路径 4.HTML5的History模式 5.router-link属性介绍 6.路由代码跳转 7.动态路由 ...
案例：后台管理案例(VUE路由案例)
目录 1. 素材下载: 2. 案例效果 3. 案例用到的知识点 4. 案例各个部分的实例代码(这里只提供修改的代码) 项目目录: 路由模块index.js部分: main.js部分: App.vue部 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
php vue jwt 实战,Vue路由之JWT身份认证的实现方法
一.JWT身份认证简介 JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案,相较于session机制,服务器就不需要保存任何 session 数据了,也就是说,服务器变成无状态了 ...

Vue 路由的模块化

Vue 路由的模块化相关推荐

最新文章

热门文章