基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程（十二） —— 为 Vue Router 添加页面布局

Laravel 可以通过Blade 模板为应用添加页面布局，不过由于我们构建的是单页面应用，可以通过 Vue Router 来实现：创建一个根级页面，其中包含在每个页面都会用到的 Vue 组件，如 Header 和 Footer。使用布局的另一个好处是你可以一次加载所有你需要的 Vuex 数据，它们会随着布局里的组件出现在所有子页面上。

第一步：重新组织嵌套路由

在设置前端路由那篇教程中，我们并没有包含嵌套路由，而 Vue Router 的路由嵌套正是可以用于创建布局的小技巧，更多关于嵌套路由的细节，可以查看 官方文档 。

首先，我们需要构建一个顶级路由作为布局，将路由文件 resources/assets/js/routes.js 中原来定义的路由删除，添加这段路由定义：

{
    path: '/',
    name: 'layout',
    component: Vue.component( 'Home', require( './pages/Layout.vue' ) ),
},

Layout.vue 布局文件将在下一步添加，现在我们继续编辑这个路由文件，我们上面定义的是一个顶级根路由，接下来我们要把原来的路由作为嵌套路由放到名为 children 的配置数组中：

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'layout',
            component: Vue.component( 'Home', require( './pages/Layout.vue' ) ),
            children: [
                {
                    path: 'home',
                    name: 'home',
                    component: Vue.component( 'Home', require( './pages/Home.vue' ) )
                },
                {
                    path: 'cafes',
                    name: 'cafes',
                    component: Vue.component( 'Cafes', require( './pages/Cafes.vue' ) ),
                },
                {
                    path: 'cafes/new',
                    name: 'newcafe',
                    component: Vue.component( 'NewCafe', require( './pages/NewCafe.vue' ) )
                },
                {
                    path: 'cafes/:id',
                    name: 'cafe',
                    component: Vue.component( 'Cafe', require( './pages/Cafe.vue' ) )
                }
            ]
        }
    ]
});

接下来我们来添加 Layout.vue 页面。

第二步：添加 Layout.vue

在 resources/assets/js/pages 目录中创建 Layout.vue 作为我们的布局文件，编辑文件内容如下：

<style>

</style>

<template>
  <div id="app-layout">
        <router-view></router-view>
  </div>
</template>

<script>
  export default {

  }
</script>

<router-view></router-view> 组件将用于渲染导入父组件的子组件。

有了布局之后，就可以导入在上一篇教程创建的 Navigation.vue 公共组件了，我们需要在导出默认组件之前导入组件，并在导出组件的 components 配置对象中告诉页面使用这个导入的组件：

<script>
    import Navigation from '../components/global/Navigation.vue';

    export default {
        components: {
            Navigation
        }
    }
</script>

最后，我们将这个组件添加到页面模板中：

<style>

</style>

<template>
    <div id="app-layout">
        <navigation></navigation>
        <router-view></router-view>
    </div>
</template>

<script>
    import Navigation from '../components/global/Navigation.vue';

    export default {
        components: {
            Navigation
        }
    }
</script>

这样， Navigation 组件就会出现在所有页面中，因为每一个页面都是布局的子页面。

下面我们在所有页面上加载数据，由于我们已经在构建 Vuex 模块教程中构建好了相关 Vuex 模块，所以只需要将其绑定布局页面的 created() 钩子函数并加载响应数据即可。在本案例中，我们需要在导航组件中显示用户信息以及咖啡店列表信息，所以最终的 Layout.vue 代码如下：

<style>

</style>

<template>
    <div id="app-layout">
        <navigation></navigation>
        <router-view></router-view>
    </div>
</template>

<script>
    import Navigation from '../components/global/Navigation.vue';

    export default {
        components: {
            Navigation
        },
        created(){
            this.$store.dispatch( 'loadCafes' );
            this.$store.dispatch( 'loadUser' );
        }
    }
</script>

编写好上述代码之后，布局组件就可以加载咖啡店列表及当前登录用户信息。

第三步：调整认证控制器重定向

这是添加布局到应用的最后一个步骤。

由于现在顶级链接指向布局页面，所以需要在用户登录成功后将重定向路由修改为 /home ，为此，打开 app/Http/Controllers/Web/AuthenticationController.php 文件，在 getSocialCallback() 方法中将重新向响应从

return redirect('/');

修改为

return redirect('/#/home');

至此，我们的页面布局已经创建完成，运行 npm run dev 重新构建应用，然后访问 http://roast.test ，登录成功后，会重定向到 http://roast.test/#/home ，此时页面显示如下：

可以看到导航组件已经显示出来了。

项目源码位于 Github 上： nonfu/roastapp 。