基于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 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
vue递归获取父元素的元素实例
Aug 07 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript 常用函数
2009/12/30 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Python操作SQLite简明教程
2014/07/10 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python图像处理入门(一)
2019/04/04 Python
Python中的__init__作用是什么
2020/06/09 Python
Django视图类型总结
2021/02/17 Python
什么是URL
2015/12/13 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
班组拓展活动方案
2014/08/14 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
redis实现共同好友的思路详解
2021/05/26 Redis
mysql创建存储过程及函数详解
2021/12/04 MySQL
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python