vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(五)

推荐我的vue教程:VUE系列教程目录

前言

通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了。制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了。

在vue中,我们使用vue-router来进行路由的构建,如果想学习可以去看:vue-router文档

很简单但是不上实战你永远不知道它写的什么,是什么意思?

本章就讲一下如何配置子路由,因为我们的项目不可能只有一个页面,而是由众多页面构成的。

新建子路由页面

在第二节中,我们新建了一个src/frame/subroute.vue的子页面。当时是留空放在那里的。这里,我们给它填写上内容,代码如下:


好,我们的子路由示例页面就构建好了。

新建子页面

我们在src/page文件夹下新建文件夹user,然后在里面新建三个文件index.vue,info.vue和love.vue。代码内容分别如下:

// src/page/user/index.vue


// src/page/user/info.vue

// src/page/user/love.vue

好,很简单,三个子页面分别有内容就是了,只是作为演示。

配置routes.js文件

打开src/config/routes.js文件,这个文件就是配置所有路由的文件。首先,在顶部插入下面的代码,引用子路由文件:(你可以结合router的API进行实战)

// 引入子路由
import Frame from '../frame/subroute.vue'

然后,我们需要引入我们前面写的俩子页面模板。代码如下:

// 引入子页面
import userIndex from '../page/user/index.vue'
import userInfo from '../page/user/info.vue'
import userLove from '../page/user/love.vue'

引入好这些文件之后,我们就开始配置子路由了。

{
  path: '/user',
  component: Frame,
  children: [
    {path: '/',component: userIndex},
    {path: 'info',component: userInfo},
    {path: 'love',component: userLove}
  ]
}

如上,新建一个 user的顶级路由节点,把component设置为Frame,然后添加子路由节点children,然后下面分别设置。

我的项目的整体代码演示如下:

// 引入子路由
import Frame from '../frame/subroute.vue'
// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'
// 引入子页面
import userIndex from '../page/user/index.vue'
import userInfo from '../page/user/info.vue'
import userLove from '../page/user/love.vue'
// 配置路由
export default [
  {
    path: '/',
    component: index
  },
  {
    path: '/content',
    component: content
  },
  {
    path: '/user',
    component: Frame,
    children: [
      {path: '/',component: userIndex},
      {path: 'info',component: userInfo},
      {path: 'love',component: userLove}
    ]
  }
]

好,我们通过浏览器访问以下,截图如下:

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(五)_第1张图片

如上,我们就很顺利的搞好这个子路由了。

小结:

这东西真心是难者不会,会者不难。现在vue的各种官方文档和第三方的教程都非常多,但是很苦恼的是,居然没有一个适应新手入门的教程。

比如一些教程上来就是一堆命令,首先,你得让我知道在哪里输入命令吧!获取你会很惊讶,这都不知道?很奇怪吗?一个windows用户,连cmd都没用过,心血来潮想要学习一下前端,然后打开各种教程一看,各种命令,晕不晕?

而我现在学习前端的各种新东西的时候,一开始也有这种迷茫。太多了,各种各样的东西。

其实困惑我们的不是有多难,而是入门的路太难找了,就好像在黑夜里我们去找一扇门,入门之前,连门在哪里都找不到。就算好了告诉你门在这里,靠,路呢?怎么走呢?

本系列教程不是让你很快的掌握高超的技巧,而是,跟着这个教程走,可以很顺利的搭建起一个项目。虽然,你可能不明白到底是为什么。

但是没有关系,在已经顺利的把一堆代码跑起来的前提下,再去看各种文档和各种教程,就顺利得多了。这就好像告诉了你路,告诉你了门,告诉你了怎么开门。

到了这里入门领路的我,把知道的告诉你了,你应该去门里面去摸索,门里面是什么?请自己去官网看教程。如果还有人说我还是没找到门,没事我之后还会出相关教程教你手把手的学会VUE,但在此之前还是希望各位去官网躺躺坑,因为VUE官网有时说的话太简洁,初学者完全明白意思但是完全不会用,因为不知道这个狗屎究竟能干嘛!你们不着急就去踩踩,我也怎么想想写的更平民化,更无脑化。

提示:在最近几天我会慢慢附上VUE系列教程的其他后续篇幅,后面还有精彩敬请期待,请大家关注我的专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。

你可能感兴趣的:(vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(五))