《实战：如何搭建一个完整的 Vue2.0 项目》- 4、路由配置

项目创建时我们选择了安装 router ，所以能直接使用。配置文件在路径 src/router/index.js 下。

建议路由页面 .vue 文件全部放在 src/views 下。

根据系统框架不同，总结了如下3类来配置

1、全部是一级路由

全部是一级路由且所有页面 .vue 文件都在目录  src/views 下，可自动读取 views 文件下的全部.vue文件，并加载为一级路由。router/index.js 可这样配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
// 获取 views 文件夹下的全部 vue 对象
const viewList  = require.context('./../views', true, /\w+\.vue$/);
// 一级路由列表，默认 / 路由是 /Home
const routes = viewList.keys().map((view) => {
    let path = view.split('.')[1];
    let item = {
        name: path,
        path: path === '/Home' ? '/' : path,
        component: () => import(`../views${path}.vue`)
    };
    return item;
}, {});
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

2、二级路由设置

如果项目框架类似如下效果，建议设置二级路由。这里拿天地图页面做比喻，但天地图不一定是这样实现。

一般二级路由都有配置信息，如下所示。path 值就是 src/views 文件夹下的vue 文件名。

// 基础配置
const PRJ_CFG = {
    pages: [
        {
            name: '首页',
            path: 'index'
        },
        {
            name: '地图API',
            path: 'ground'
        },
        {
            name: '网页API',
            path: 'coast'
        },
        {
            name: 'WEB服务API',
            path: 'soilwater'
        },
        {
            name: '数据API',
            path: 'underground'
        },
        {
            name: '服务资源',
            path: 'monitor',
        }
    ]
};

目录结构如下。注意，Home 是主页，其它是子页，也就是二级路由页。

这时需要修改两个文件 src/router/index.js  和 src/views/Home.vue 。

src/router/index.js

重点：要设置 redirect 值，用于进入 / 路径时做子页跳转，否则是空页。

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
// 默认加载配置页面
const childRoutes = PRJ_CFG.pages.map((page) => {
    let item = {
        name: page.path,
        path: `${page.path}`,
        component: () => import(`./../views/${page.path}.vue`)
    };
    return item;
});
 
 
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
            path: "/",
            component: () => import("./../views/Home.vue"),
            redirect: childRoutes[0].path, // 设置默认打开的页面
            children: childRoutes
        }
    ]
})
 
export default router

src/views/Home.vue

重点<router-view/>

<template>
    <div class="home">
        <router-view/>
    </div>
</template>
 
<script>
 
export default {
    data() {
        return {
 
        }
    },
    methods: {
 
    }
}
</script>

3、混合型

根据上面描述的两种方式做扩展，这里不再赘述。