Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由
前言
通过前面几章的实战,我们已经顺利的构建项目,并且从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 构建项目实战(五):配置子路由的更多相关文章
- Vue2+VueRouter2+webpack 构建项目实战(二):目录以及文件结构
通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目 ...
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...
- Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表: Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+webpack 构建项目实战(一):准备工作
环境准备 首先,要开始工作之前,还是需要把环境搭建好.需要的环境是nodejs+npm,当然现在安装node都自带了npm. 在终端下面输入命令node -v会有版本号出来.就说明安装成功了.输入np ...
- Vue2+VueRouter2+webpack 构建项目实战(四):接通api,渲染列表
通过前面几篇教程,我们已经顺利搭建起来了,并且已经组建好路由了.本章节,我们需要做一个列表页面,然后利用获取 http://cnodejs.org/api 的公开API,渲染出来. 我们打开src/p ...
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 【大话QT之十六】使用ctkPluginFramework插件系统构建项目实战
"使用ctkPluginFramework插件系统构建项目实战",这篇文章是写博客以来最纠结的一篇文章. 倒不是由于技术都多么困难,而是想去描写叙述一个项目架构採用ctkPlugi ...
- miniFTP项目实战五
项目简介: 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务 ...
- Vue2构建项目实战
转载整理自http://blog.csdn.net/fungleo/article/details/77575077 vue构建单页应用原理 SPA 不是指水疗.是 single page web a ...
随机推荐
- Kubenetes---Service--实践
1,编写创建svc的yaml文件 2, 创建service 3, 查看 4,查看svc代理那些pod , 当前没有 先创建deployment --> service 查看pod的label信 ...
- 【雷神源码解析】无基础看懂AAC码流解析,看不懂你打我
一 前言 最近在尝试学习一些视频相关的知识,随便一搜才知道原来国内有雷神这么一个真正神级的人物存在,尤其是在这里(传送门)看到他的感言更是对他膜拜不已,雷神这种无私奉献的精神应当被我辈发扬光大.那写这 ...
- java基础-2
java基础-2 面向对象 定义 面向对象是一种思维方式,相对于面向过程面向过程注重流程中的每一步,清楚流程中的每一个细节面向对象注重的是对象,有了对象就有对象的一届自己动手做--面向过程,找其 ...
- ZOJ Problem Set - 3708 Density of Power Network
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3708 #include <stdio.h> #include ...
- 遇到的一些Jquery,js函数
jQuery.extend() jQuery.merge():函数用于合并两个数组内容到第一个数组. <script> $(function () { ,,], [,,] ...
- socket编程(C++)
介绍 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 过程介绍 服务器端和客户端通信过程如下所示: 服务端 服务端的过程主要在该图的左侧部分,下 ...
- IDEA远程仓库版本回滚
访问我的博客 使用 git 进行项目的版本控制时,肯定会遇到回滚版本的情况,回滚有两种,一种是本地仓库回滚,另外一种是远程仓库回滚.以下详细讲解两种回滚方式,本文主要讲解远程回滚,以及常见使用误区. ...
- WCF 的学习过程
之前没有接触过WCF,这两天学习中.把遇到的问题和解决办法记下来. 遇到的问题: (1).HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理 ...
- Swing——布局管理器
前言 在编写图形界面时,总是需要考虑的就是组件放在哪里,组件怎么大才合适.在Swing中就有现成的布局管理器帮我们做这些事情,我们不必写代码去一一安排.下面将介绍什么是布局管理器.Swing中常用布局 ...
- 搞懂Python的类和对象名称空间
代码块的分类 python中分几种代码块类型,它们都有自己的作用域,或者说名称空间: 文件或模块整体是一个代码块,名称空间为全局范围 函数代码块,名称空间为函数自身范围,是本地作用域,在全局范围的内层 ...