内容简介:Laravel 可以通过Blade 模板为应用添加页面布局,不过由于我们构建的是单页面应用,可以通过 Vue Router 来实现:创建一个根级页面,其中包含在每个页面都会用到的 Vue 组件,如 Header 和 Footer。使用布局的另一个好处是你可以一次加载所有你需要的 Vuex 数据,它们会随着布局里的组件出现在所有子页面上。在设置前端路由那篇教程中,我们并没有包含嵌套路由,而 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 。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- [译] 使用 React 和 ImmutableJS 构建一个拖放布局构建器
- (译)使用渲染函数构建一个设计系统的排版布局
- 《从零构建前后分离的web项目》:前端完善 - 手把手教你快速构建网站布局
- 优云数智CTO:构建IaaS+PaaS融合,布局云计算新未来
- 【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型
- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。