首页 > 代码库 > Vue2+VueRouter2+webpack 构建项目实战（五）：配置子路由
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 构建项目实战（五）：配置子路由
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。