基于 Vue Router 构建单页面应用项目骨架

Created 3 years ago by 学院君, Updated 3 years ago Revision #1 2499 views 0 likes 0 collects

基于读者的反馈，希望多出一些高级进阶版的教程，所以后续学院君仍然会以后端进阶教程为主，不过单页面应用和相关项目作为全栈开发系列的收尾部分，还是会更新掉。今天开始，学院君将花几个篇幅的教程给大家快速过一下如何基于 Laravel 框架进行单页面应用开发，侧重流程，不再侧重知识点。

初始化项目和前端依赖

开始之前，先通过如下步骤初始化一个新的 Laravel 项目作为单页面应用演示项目：

// 1、初始化 Laravel 项目
laravel new demo-spa

// 2、安装 laravel/ui 扩展包
cd demo-spa
composer require laravel/ui
php artisan ui vue

// 3、安装 & 编译前端依赖
npm install && npm run dev

安装 Vue Router 和 Vuex

要基于 Vue 框架构建单页面应用，Vue Router 和 Vuex 是不可或缺的前端依赖库，前者是 Vue 官方提供的前端页面路由管理器，后者是 Vue 官方提供的前端组件状态（数据）管理器。关于这两个依赖库的语法细节这里不展开了，你可以参考对应的官方文档或者网上视频进行更深入的了解。

我们可以在 demo-spa 项目根目录下通过如下命令安装这两个前端依赖：

npm install vue-router vuex --save-dev

安装完成后，就可以在 resources/js/app.js 中引入并使用它们了，以 Vue Router 为例，我们可以在 resources/js 目录下新建一个 routes.js 作为前端路由文件，然后在 app.js 中这样通过 Vue Router 引入前端路由：

window.Vue = require('vue');
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);

...

const app = new Vue({
    el: '#app',

    router: new VueRouter(routes)
});

编写前端页面组件

为了演示前端路由的使用，我们先在 resources/js/components 目录下新建两个页面组件 Home.vue：

<style scoped>

</style>

<template>
    <h1>Home Page</h1>
</template>

<script>
export default {}
</script>

和 About.vue：

<style scoped>

</style>

<template>
    <h1>About Page</h1>
</template>

<script>
export default {}
</script>

编写前端路由导航

接下来，我们在前端路由文件 resources/js/routes.js 中编写几个测试路由：

export default {
    mode: 'history',

    routes: [
        {
            path: '/',
            component: require('./components/Home').default
        },
        {
            path: '/about',
            component: require('./components/About').default
        }
    ]
}

这里我们使用了 HTML5 History 模式在不同前端路由之间实现页面无刷新切换。

在 HTML 视图中渲染前端路由导航

做好上述准备工作后，就可以在 HTML 视图模板中通过如下方式渲染通过 Vue Router 路由匹配到的前端页面组件了：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
    </head>
    <body class="antialiased">
        <div id="app">
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>

            <hr>

            <!-- 使用 router-link 组件来导航 -->
            <!-- 通过传入 `to` 属性指定链接 -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
        </div>

        <script src="{{ asset('/js/app.js') }}"></script>
    </body>
</html>