基于Vue+Webpack拆分路由文件实现管理


Posted in Javascript onNovember 16, 2020

事实是,如果你的项目不是特别大,一般是用不着分拆的。如果项目大了,那就需要考虑分拆路由了。其实,这个操作并不复杂。

当我们用 vue-cli 工具,创建一个新的 vue 项目时,就已经给大家新建好了一个路由文件 src/router/index.js ,内容如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

我们以这个文件为蓝本,进行调整。举例,我们现在要新建一个 news 的这个路由,然后这个路由下面,还有一些子路由,我们就可以这样写:

router/index.js 文件调整

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// 子路由视图VUE组件
import frame from '@/frame/frame'

import HelloWorld from '@/components/HelloWorld'
// 引用 news 子路由配置文件
import news from './news.js'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }, {
   path: '/news',
   component: frame,
   children: news
  }
 ]
})

如上,我们引入一个子路由视图的 vue 组件,然后再引入 news 的子路由配置文件即可。下面我们来编写这两个文件。

frame/frame 子路由视图 vue 组件

<template>
<router-view />
</template>

子路由视图组件就异常简单了,如上,三行代码即可,有关 router-view 的相关内容,请查看:

https://router.vuejs.org/zh/api/#router-view

router/news.js 子路由配置文件

其实,配置这个文件和 vue 没有什么关系,纯粹就是 js es6 的导出和导入而已。

import main from '@/page/news/main'
import details from '@/page/news/details'

export default [
 {path: '', component: main},
 {path: 'details', component: details}
]

如上,即可。我们就完成了路由的多文件管理了。这样看,是不是很简单呢?有什么问题,请在评论中留言,我会抽时间答复大家。

更多内容,请参考官方网站:https://router.vuejs.org/zh/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
小程序实现上下切换位置
Nov 16 #Javascript
小程序实现点击tab切换左右滑动
Nov 16 #Javascript
微信小程序实现滚动Tab选项卡
Nov 16 #Javascript
小程序实现tab标签页
Nov 16 #Javascript
vue+Element-ui实现登录注册表单
Nov 17 #Javascript
Vue+Element-U实现分页显示效果
Nov 15 #Javascript
vue+Element-ui前端实现分页效果
Nov 15 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python实现识别相似图片小结
2016/02/22 Python
python numpy格式化打印的实例
2018/05/14 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
keras.layer.input()用法说明
2020/06/16 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
生产总经理岗位职责
2013/12/19 职场文书
公务员综合考察材料
2014/02/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
golang为什么要统一错误处理
2022/04/03 Golang