基于Vue+Webpack拆分路由文件实现管理
2020-11-18 04:07
1521 查看
事实是,如果你的项目不是特别大,一般是用不着分拆的。如果项目大了,那就需要考虑分拆路由了。其实,这个操作并不复杂。
当我们用 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打包通过image-webpack-loader插件对图片压缩优化操作
- 在vue中使用image-webpack-loader实例
- 解决vue init webpack 下载依赖卡住不动的问题
- 从零开始用webpack构建一个vue3.0项目工程的实现
- vue pages 多入口项目 + chainWebpack 全局引用缩写说明
- vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
- maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
- 解决vue+webpack项目接口跨域出现的问题
- vue 解决uglifyjs-webpack-plugin打包出现报错的问题
相关文章推荐
- 基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录
- 搭建vue脚手架项目中生成文件的含义,基于webpack创建项目生成文件的含义???
- 如何用vue脚手架快速构建一个基于webpack管理的vue项目
- vue路由分文件拆分管理详解
- electron-vue利用webpack打包实现多页面的入口文件问题
- Vue结合webpack实现路由懒加载和分类打包
- vue 基于webpack 的项目文件解析,在哪个文件该做什么事情
- vue设置webpack文件别名+配置路由的默认class
- 【CSDN开源夏令营】 基于Web的SSH客户端,实现跨平台的云服务管理(四)文件树功能的实现
- 基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架
- 使用 webpack 插件自动生成 vue 路由文件的方法
- 基于webpack4+vue-cli3项目实现换肤功能
- 使用 webpack 的 require.context 实现路由“去中心化”管理
- 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离
- 如何创建一个基于webpack打包的Vue项目,并实现码云上git仓库与本地仓库实现连通
- vue---vue2.x中如何异步加载路由组件,webpack+vue实现组件懒加载
- 基于Vue 和 webpack的项目实现
- 分享:使用 webpack 的 require.context 实现路由“去中心化”管理
- 创建一个基于webpack的vue脚手架(带config,build文件)
- 基于webpack和vue.js搭建开发环境(修改文章列子几个小错误)