基于Vue+Webpack拆分路由文件实现管理
更新时间：2020年11月16日 08:31:43 作者：FungLeo
这篇文章主要介绍了基于Vue+Webpack拆分路由文件实现管理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。
当我们用 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/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章中,我将逐步介绍如何使用 Vue 和 ECharts 实现一个互动式的地图展示组件,其中支持返回上一层地图、点击查看不同城市的详细信息,以及根据数据动态展示不同的统计信息,感兴趣的小伙伴跟着小编一起来看看吧2025-02-02
这篇文章主要给大家介绍了关于Vue实现登录功能(含封装axios)的相关资料,Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue v-on监听事件的相关资料，Vue.js中的监听事件是如何处理的，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Vue.js作为现代前端开发中的佼佼者,其组件系统是构建高效、灵活和可扩展用户界面的关键,本文带大家深度探索 Vue.js 组件的核心奥义,感兴趣的小伙伴可以了解下2024-12-12
本文通过实例代码给大家介绍了基于vue2.0实现仿百度前端分页效果,在文中给大家记录了遇到的问题及解决方法，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue3.0-monaco组件封装存档代码解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
作为Web Storage API的接口,Storage 提供了访问特定域名下的会话存储或本地存储的功能,例如可以添加、修改或删除存储的数据项,这篇文章主要给大家介绍了关于如何使用Vue的思想封装一个Storage的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了Vue2 Watch监听,通过watch监听器,我们可以实时监控数据的变化,并且在数据发生改变时进行相应的操作,需要的朋友可以参考下2023-12-12
Vue CLI4.0 webpack配置属性之productionSourceMap用法
这篇文章主要介绍了Vue CLI4.0 webpack配置属性之productionSourceMap用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了Vue3中如何检测数组的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论