基于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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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/24 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
JS表的模拟方法
2015/02/05 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
javascript每日必学之多态
2016/02/23 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python性能测试工具locust的使用
2020/12/28 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
学生档案自我鉴定
2013/10/07 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
中学生差生评语
2014/01/30 职场文书
战友聚会策划方案
2014/06/13 职场文书
宣传活动总结范文
2014/07/01 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
高中校园广播稿
2014/10/21 职场文书
爱国之歌(8首)
2019/09/29 职场文书
以下牛机,你有几个
2022/04/05 无线电