基于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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
js中的深浅拷贝问题简析
May 10 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
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PDO::errorCode讲解
2019/01/28 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
5.12护士节演讲稿
2014/04/30 职场文书
母亲节寄语大全
2015/02/27 职场文书
高一军训口号
2015/12/25 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript