基于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/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vuepress生成文档部署到gitee.io的注意事项及说明
这篇文章主要介绍了Vuepress生成文档部署到gitee.io的注意事项及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)
这篇文章主要介绍了Nuxt3项目搭建(Nuxt3+element-plus+scss详细步骤),本次记录一次使用Nuxt3搭建前端项目的过程,内容包含Nuxt3的安装,基于Vite脚手架(默认)构建的vue3项目,element-plus的安装配置,scss的安装,目录结构的创建和解释,需要的朋友可以参考下2022-12-12一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)
冒泡就是事件开始是由最具体的元素接收,然后逐层向上级传播到较为不具体的元素,这篇文章主要给大家介绍了关于阻止事件冒泡的4种方法,文中介绍的方法分别是原生js阻止以及vue中使用修饰符阻止的相关资料,需要的朋友可以参考下2023-12-12Vue项目中CSS Modules和Scoped CSS的介绍与区别
在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS Modules和Scoped CSS的相关资料,需要的朋友可以参考下2022-03-03VUE在for循环里面根据内容值动态的加入class值的方法
这篇文章主要介绍了VUE在for循环里面根据内容值动态的加入class值的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08element-ui table span-method(行合并)的实现代码
element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,非常具有实用价值,需要的朋友可以参考下2018-12-12vue在使用element组件出现<el-input>标签无法输入的问题
这篇文章主要介绍了vue在使用element组件出现<el-input>标签无法输入的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04
最新评论