前言

通過前面幾章的實戰，我們已經順利的構建項目，並且從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 構建項目實戰（五）：配置子路由