Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由
前情回顾
《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》
《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》
《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》
《Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表》
《Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由》
《Vue2+VueRouter2+webpack 构建项目实战(六)修复代码并通过验证,另发布代码》
前言
通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了。制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了。
本章讲一下如何配置子路由,因为我们的项目不可能只有一个页面,而是由众多页面构成的。
新建子路由页面
在第二节中,我们新建了一个src/frame/subroute.vue
的子页面。当时是留空放在那里的。这里,我们给它填写上内容,代码如下:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
好,我们的子路由页面就构建好了。
新建子页面
我们在src/page
文件夹下新建文件夹user
,然后在里面新建三个文件index.vue
,info.vue
和love.vue
。代码内容分别如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
好,很简单,三个子页面分别有内容就是了,只是作为演示。
配置routes.js文件
打开src/config/routes.js
文件,这个文件就是配置所有路由的文件。首先,在顶部插入下面的代码,引用子路由文件
- 1
- 2
- 1
- 2
然后,我们需要引入我们前面写的俩子页面模板。代码如下:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
引入好这些文件之后,我们就开始配置子路由了。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
如上,新建一个 user
的顶级路由节点,把component
设置为Frame
,然后添加子路由节点children
,然后下面分别设置。
我的项目的整体代码演示如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
好,我们通过浏览器访问以下,截图如下:
如上,我们就很顺利的搞好这个子路由了。
小结
这东西真心是难者不会,会者不难。现在vue的各种官方文档和第三方的教程都非常多,但是很苦恼的是,居然没有一个适应新手入门的教程。
比如一些教程上来就是一堆命令,首先,你得让我知道在哪里输入命令吧!获取你会很惊讶,这都不知道?很奇怪吗?一个windows用户,连cmd都没用过,心血来潮想要学习一下前端,然后打开各种教程一看,各种命令,晕不晕?
若干年前我写过一篇教程文章,看过的人问“文中的‘任意目录’是TM哪个目录?”,我当时很崩溃。这都不知道?随便啊~你爱放哪里放哪里。。。但是,就有人不知道。
而我现在学习前端的各种新东西的时候,一开始也有这种迷茫。太多了,各种各样的东西。所幸我不是一个人在战斗,我和同事一起学习研究,终于,算是入门了。
入门之前,连门在哪里都找不到。
本系列教程不是让你很快的掌握高超的技巧,而是,跟着这个教程走,可以很顺利的搭建起一个项目。虽然,你可能不明白到底是为什么。
但是没有关系,在已经顺利的把一堆代码跑起来的前提下,再去看各种文档和各种教程,就顺利得多了。
最后,祝大家都学习进步。
我的代码风格不严谨。所以通不过那个劳什子编译检查。比如多个分好啦,多个逗号啦之类的。所以请关闭编译检查后执行,否则,满屏错误不要怪我哦。
本测试项目github地址是 https://github.com/fengcms/vuedemo 之所以前面没放出来,但是给了大量的代码,是让你自己手工干出一个来,而不是clone一下了事。
本文由FungLeo原创,允许转载,但转载必须附带首发链接。如果你不带链接,我将采取包括但不限于深深的鄙视你等手段!