Vue-router:路由嵌套及index.js 文件拆分

1. Vue-router

Vue-router 是为了配合Vue.js

构建单页面应用而存在的,在使用方面,我们需要做的是,将组件映射到路由,然后告诉Vue-router

在哪里渲染它们。具体教程请移步:https://router.vuejs.org/zh-cn/essentials/getting-started.html.

因为文档中对于嵌套路由的描述不是特别契合应用场景,所以这里重新梳理一番,并对router文件夹下的index.js

文件进行拆分,实现简单的功能解耦。

2. 路由和路由嵌套

路由的意义就在于我们可以保持页面一部分固定而只改变页面的剩余部分,路由嵌套的存在则是因为我们需要根据应用场景提供不同粒度的路由,听起来有点抽象,直接来看图。


以上图为例,三个颜色的框分别代表了三个不同粒度的路由(三层路由嵌套)。红色框存在的原因是需要区分是登录页面,还是操作页面。绿色框的存在是因为不同管理模块的左边菜单栏内容和按钮不一致,所以这一块也需要是可变的。黄色框则是在一个管理模块内根据不同的菜单选择而展现不同的内容。

3. 怎么实现路由嵌套

详细见    https://www.cnblogs.com/vivaxiaonan/p/9896040.html

Vue-router:路由嵌套及index.js 文件拆分


https://segmentfault.com/q/1010000008313816/a-1020000009569692/revision

vue-router可以进行模块拆分吗?就像vuex的模块化拆分一样。


https://www.cnblogs.com/xyyt/p/7718867.html

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

你可能感兴趣的:(Vue-router:路由嵌套及index.js 文件拆分)