基于 Vue Router 构建单页面应用项目骨架
共 4859字，需浏览 10分钟
·
2021-03-23 23:23
今天开始，学院君将花几个篇幅的教程给大家快速过一下如何基于 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>
六、测试前端路由导航组件渲染
运行 npm run dev 重新编译前端资源，在运行 php artisan serve 启动 Web 服务器，在浏览器中访问 http://127.0.0.1:8000/，即可看到默认渲染的 Home 页面：
点击「About」链接，即可切换到 About 页面：
这样，我们就基于 Vue Router 构建起了一个非常简单的单页面应用项目骨架。下篇教程我们将通过对页面组件进行布局来构建更加复杂的单页面应用。
本系列教程首发在Laravel学院（laravelacademy.org），你可以点击页面左下角阅读原文链接查看最新更新的教程。