前言

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

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

新建子路由页面

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

<template>
<div>
<div class="main">
<ul>
<li><router-link :to="{name:'userdefault'}">用户中心默认</router-link></li>
<li><router-link :to="{name:'userinfo'}">用户中心详情</router-link></li>
<li><router-link :to="{name:'userlast'}">用户中心设置</router-link></li>
</ul>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return { }
}
}
</script>

新建子页面

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

index.vue代码:

<template>
<div>user index page</div>
</template>

info.vue代码:

<template>
<div>user info page</div>
</template>

set.vue代码:

<template>
<div>user set page</div>
</template>

配置routes.js文件

打开src/config/routes.js文件,这个文件就是配置所有路由的文件。首先,在顶部插入下面的代码,引用子路由文件

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

routes.js完整代码:

import Vue from 'vue'
import Router from 'vue-router' // 引入子路由
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 userSet from '../page/user/set.vue' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
component: index
},
{
path: '/content',
component: content
},
{
name:'user',
path:'/user',
component: Frame,
children: [
{name:'default',path: '/user/',redirect: '/user/userdefault'},
{name:'userdefault',path: '/user/userdefault',component: userIndex},
{name:'userinfo',path: '/user/userinfo',component: userInfo},
{name:'userlast',path: '/user/userlast',component: userSet}
],
},
]
})

同时在App.vue中添加一个用户中心入口,整体代码:

<template>
<div id="app">
<div class="nav-list">
<router-link class="nav-item" to="/">首页</router-link>
<router-link class="nav-item" to="/content">内容页</router-link>
<router-link class="nav-item" to="/user">用户中心</router-link>
</div>
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style lang="scss">
@import "./style/style";
</style>

我们进入用户中心默认页如图所示:

如果点击用户中心详情,就进入如图所示:

参考

参考地址:http://blog.csdn.net/fungleo/article/details/53213167

Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由的更多相关文章

  1. Vue2+VueRouter2+webpack 构建项目实战(二):目录以及文件结构

    通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目 ...

  2. Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

  3. Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表

    Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表:  Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

  4. Vue2+VueRouter2+webpack 构建项目实战(一):准备工作

    环境准备 首先,要开始工作之前,还是需要把环境搭建好.需要的环境是nodejs+npm,当然现在安装node都自带了npm. 在终端下面输入命令node -v会有版本号出来.就说明安装成功了.输入np ...

  5. Vue2+VueRouter2+webpack 构建项目实战(四):接通api,渲染列表

    通过前面几篇教程,我们已经顺利搭建起来了,并且已经组建好路由了.本章节,我们需要做一个列表页面,然后利用获取 http://cnodejs.org/api 的公开API,渲染出来. 我们打开src/p ...

  6. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  7. 【大话QT之十六】使用ctkPluginFramework插件系统构建项目实战

    "使用ctkPluginFramework插件系统构建项目实战",这篇文章是写博客以来最纠结的一篇文章. 倒不是由于技术都多么困难,而是想去描写叙述一个项目架构採用ctkPlugi ...

  8. miniFTP项目实战五

    项目简介: 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务 ...

  9. Vue2构建项目实战

    转载整理自http://blog.csdn.net/fungleo/article/details/77575077 vue构建单页应用原理 SPA 不是指水疗.是 single page web a ...

随机推荐

  1. Kubenetes---Service--实践

    1,编写创建svc的yaml文件 2,  创建service 3, 查看 4,查看svc代理那些pod , 当前没有 先创建deployment --> service 查看pod的label信 ...

  2. 【雷神源码解析】无基础看懂AAC码流解析,看不懂你打我

    一 前言 最近在尝试学习一些视频相关的知识,随便一搜才知道原来国内有雷神这么一个真正神级的人物存在,尤其是在这里(传送门)看到他的感言更是对他膜拜不已,雷神这种无私奉献的精神应当被我辈发扬光大.那写这 ...

  3. java基础-2

    java基础-2 面向对象 定义 面向对象是一种思维方式,相对于面向过程​面向过程注重流程中的每一步,清楚流程中的每一个细节​面向对象注重的是对象,有了对象就有对象的一届​自己动手做--面向过程,找其 ...

  4. ZOJ Problem Set - 3708 Density of Power Network

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3708 #include <stdio.h> #include ...

  5. 遇到的一些Jquery,js函数

     jQuery.extend()        jQuery.merge():函数用于合并两个数组内容到第一个数组. <script> $(function () { ,,], [,,] ...

  6. socket编程(C++)

    介绍 ​ 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 过程介绍 ​ 服务器端和客户端通信过程如下所示: 服务端 ​ 服务端的过程主要在该图的左侧部分,下 ...

  7. IDEA远程仓库版本回滚

    访问我的博客 使用 git 进行项目的版本控制时,肯定会遇到回滚版本的情况,回滚有两种,一种是本地仓库回滚,另外一种是远程仓库回滚.以下详细讲解两种回滚方式,本文主要讲解远程回滚,以及常见使用误区. ...

  8. WCF 的学习过程

    之前没有接触过WCF,这两天学习中.把遇到的问题和解决办法记下来. 遇到的问题: (1).HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理 ...

  9. Swing——布局管理器

    前言 在编写图形界面时,总是需要考虑的就是组件放在哪里,组件怎么大才合适.在Swing中就有现成的布局管理器帮我们做这些事情,我们不必写代码去一一安排.下面将介绍什么是布局管理器.Swing中常用布局 ...

  10. 搞懂Python的类和对象名称空间

    代码块的分类 python中分几种代码块类型,它们都有自己的作用域,或者说名称空间: 文件或模块整体是一个代码块,名称空间为全局范围 函数代码块,名称空间为函数自身范围,是本地作用域,在全局范围的内层 ...