Vue2+VueRouter2+webpack 构建项目实战：配置子路由

Posted 2020-10-01 风雨后见彩虹

前言

通过前面几章的实战，我们已经顺利的构建项目，并且从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