Vue2+VueRouter2+webpack 構建項目實戰（五）：配置子路由

標籤：參考   bpa   css   path   index   red   ram   ade   渲染   

前言

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