基于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 watch深度监听对象实现数据联动的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了vue实现内容可滚动的弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了浅谈vuex为什么不建议在action中修改state，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
在VSCode中添加好用的插件可以提高我们的开发效率,这些可以帮助我们格式化,扩充性,执行最佳实践的代码方式,自动完成一些琐碎的事情,下面这篇文章主要给大家推荐介绍了关于Vue3开发必备的六个VSCode插件,需要的朋友可以参考下2022-12-12
由于开发需要,我需要在登录成功请求成功后,调用父窗口的一个点击事件方法,这篇文章主要给大家介绍了关于vue跨窗口通信之新窗口调用父窗口的相关资料,需要的朋友可以参考下2023-01-01
本文介绍了如何在Vue3项目中整合Live2D技术,从Live2D的基本介绍到在Vue3中的具体实现方法,Live2D技术允许开发者将二维图像转化为可动画的三维模型,主要应用于游戏、虚拟角色等领域,文章详细说明了在vue3项目中使用Live2D的步骤,感兴趣的朋友一起看看吧2024-10-10
自定义指令是一种在Vue应用程序中扩展HTML标签的能力，通过自定义指令，我们可以直接在模板中使用指令名，下面我们就来看看项目中具体如何使用自定义指令的吧2023-08-08
这篇文章主要为大家介绍了用了babel是否还需要polyfill的原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
本篇文章主要介绍了在vue-cli中组件通信的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论