专栏首页LaravelCode通过 Laravel 创建一个 Vue 单页面应用(一)

通过 Laravel 创建一个 Vue 单页面应用(一)

使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中,我们将学习如何构建并运行一个以 Vue 路由为前端,laravel 为后端的 SPA 应用。首先我们将注意力集中在编写每一个小的功能代码块上,然后在后续的教程中,我们再演示如何将 Laravel 作为 API 层而构建一个完整的应用。

一个以 Laravel 为后端的 Vue SPA 应用的基本运行流程如下:

  • 第一个请求触发服务端的 Laravel 路由
  • Laravel 渲染 SPA 布局
  • 接下来的请求使用 history.pushState API 触发页面跳转而无需重载页面

Vue router 有两种模式,分别为 history 模式和默认的 hash 模式。hash 模式使用 URL hash 来模拟一个完整的 URL,这样就可以使 URL 变化时页面却无需重新加载。

我们这里将要使用 history 模式,也就是说我们需要配置一个 Laravel 路由来匹配所有用户在 SPA 页面中可以进入的 URL。举个例子, 如果用户在浏览器中刷新了 /hello 这个路由,我们 (Laravel) 需要匹配到它并返回对应的 Vue 模板。Vue Router 将会识别该路由并渲染对应的 Vue 页面组件。

安装

首先我们会创建一个 Laravel 项目,然后再安装 VueNPM 路由包:

laravel new vue-router
cd vue-router

# 当使用 Valet 时,建立项目链接
valet link

# 安装 NPM 依赖,添加 vue-router 包
yarn install
yarn add vue-router # or npm install vue-router

我们已经完成了 Laravel 项目的安装,而且 vue-router 包也已经就绪。接下来,配置路由,定义一系列路由和组件。

配置 Vue 路由

Vue 路由执行的过程是为 Vue 组件定义一个路由,然后在应用中下面的标签中渲染:

<router-view></router-view>

router view 是在整个 Vue 应用组件中都生效的。我们暂时回到 APP 组件中。

首先,我们将更新最主要的 JavaScript 文件 resources/assets/js/app.js 以及配置 Vue 路由。将 app.js 中的内容替换成下面这个样子:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

我们需要添加一些文件,但是在这之前,我们来检查一下 app.js

  • 通过  Vue.use() 来导入和安装 VueRouter 插件
  • 我们导入三个 Vue 组件:
    • App 组件(最外层的应用组件)
    • Hello 组件匹配 /hello 路由
    • Home 组件匹配 / 路由
  • 创建一个新的 VueRouter 对象,来存储相关配置
  • 通过在 Vue 的构造方法中添加 App 组件,来让 Vue 知道 App 组件
  • 将 router 常量添加到这个 Vue 应用中,通过 this.$router 和 this.$route 来调用 VueRouter 构造器包含一个路由数组,在这个数组中定义路由的路径,名称(类似于 Laravel 的命名路由)和这个路径对应的页面组件。

我一般会把路由定义在一个单独的路由模块中,然后再引入主应用文件,但这里为了简便,我会直接在主应用文件(app.js)中定义这些路由。

为了让 Laravel mix 成功运行,我们需要定义如下三个组件:

mkdir resources/assets/js/views
touch resources/assets/js/views/App.vue
touch resources/assets/js/views/Home.vue
touch resources/assets/js/views/Hello.vue

首先是 App.vue 文件,这是应用的最外层的容器元素。在这个组件中,我们使用 Vue Router<router-link/> 标签定义一个「头部」和一些导航:

<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
            <router-link :to="{ name: 'home' }">Home</router-link> |
            <router-link :to="{ name: 'hello' }">Hello World</router-link>
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

App 组件中最重要的标签是 <router-view></router-view>,其它通过路由匹配到的组件(如 HomeHello)都是在这里进行渲染的。

下一个需要定义的组件是 resources/assets/js/views/Home.vue

<template>
  <p>This is the homepage</p>
</template>

最后,我们在 resources/assets/js/views/Hello.vue 路径下定义一个 Hello 组件。

<template>
  <p>Hello World!</p>
</template>

我倾向于把复用组件从页面组件中分离出来,做法是把页面组件放在 resources/assets/js/views 文件夹下,把复用组件放在 resources/assets/js/components 文件夹下。我通常会这么做,因为这可以让我轻松地分辨出哪些是可复用的组件,哪些是纯页面组件。

前端页面做到这些,就已达到运行我们的 Vue 应用所需要的了。接下来,我们需要定义好后端路由和服务端模板。

服务器端

我们使用带有 Vue SPA 的 Laravel 应用程序框架,可以很方便的在我们的应用程序中构建服务端 API。我们还可以使用 Blade 渲染应用程序并且通过全局 JavaScript 对象来配置公共环境,我认为这是很方便的。

在本教程中,我们不会去构建一个 API 实例,但是我们将在后续教程中介绍。 这篇文章主要是关于连接 Vue 路由的。

我们在服务器端要解决的第一件事是定义路由。 打开 routes/web.php 文件并且替换 welcome 路由为一下内容:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| 你可以在这里为你的应用程序注册web路由。 这些
| 路由由RouteServiceProvider加载到一个包含「web」
| 的中间件组中。现在让我们创建一些很棒的东西!
|
*/

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

我们为 SpaController 控制器定义了一个综合路由,这意味着任何 web 路由都将映射到我们的SPA。如果我们不这样做, 当用户发送了一个 /hello 请求时, Laravel 将返回 404 响应.

接下来, 我们需要创建 SpaController  控制器并且定义视图:

php artisan make:controller SpaController

打开 SpaController 控制器并且输入以下内容:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}

最后, 输入以下内容到 resources/views/spa.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue SPA Demo</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

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

我们定义了必需的 ~#app 元素 ,其中包含了将要呈现的 App 组件,以及根据 URL 所呈现的其他组件。

运行项目

自此, 我们完成了一个使用 Vue 和 Vue Router 的 SPA 应用的基本框架, 接下来让我们通过运行 JavaScript 让它显示出来:

yarn watch # 或 npm run watch

当我们在浏览器中输入对应 URL 时,将会看到如下页面:

下一步

我们已经建立起了一个使用 Laravel 作为 API 层的 Vue SPA 应用的骨架。但这个应用仍有很多功能需要我们在后续的教程中来实现:

  • 在前端定义一个 404 路由
  • 使用路由参数
  • 子路由
  • 在组件中向 Laravel 发起一个 API 请求
  • 可能还有很多,但我不准备全部列在这里...

本篇教程通过这些基础准备工作展示了我们可以轻松地使用 Vue Router 来开始一个 SPA 应用。如果你还不熟悉 Vue Router,请查阅 Vue Router 文档

进入 Part 2 !


原文地址:https://laravel-news.com/using-vue-router-laravel

译文地址 :https://learnku.com/laravel/t/34252

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Laravel 项目中编写 Vue 组件

    新安装的 Laravel 应用在 resources/js/components 目录默认包含一个 ExampleComponent.vue Vue 组件。 ...

    hedeqiang
  • PHPStorm + Homestead 配置 Xdebug

    常生活中百分之一万的情况下,我们在和 BUG 打交道,遇到问题我们该怎么办呢?有经验的话猜也能猜八九不离十,但是完事不可能靠猜来解决,所以有时候得追踪到 bug...

    hedeqiang
  • 如何禁止浏览器不缓存静态资源

    很多时候我们再做一个功能的时候,明明改了代码,但实际还是原来的样子。其实很多时候并不是代码 BUG 导致,而是浏览器缓存的问题。所以都有哪些方式来禁用浏览器缓存...

    hedeqiang
  • 干货 | vue-router与创建登录组件

    “ 最近在学习使用Vue作为前端的框架,本文记录路由插件vue-router,以及搭建登录页面的过程。 ” vue-router 在使用vue-router时...

    腾讯NEXT学位
  • vue学习笔记3

    什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;...

    用户6362579
  • Python3网络爬虫(三):urllib.error异常

    运行平台:Windows Python版本:Python3.x IDE:Sublime text3 一.urllib.error     urllib...

    Jack_Cui
  • Python3网络爬虫(三):urllib.error异常

    原作者及原文链接: https://blog.csdn.net/c406495762/article/details/59488464

    圆方圆PYTHON学院
  • Vue 2.0 正式发布了!

    时见疏星
  • STL 总结与常见面试题

    为了建立数据结构和算法的一套标准,并且降低他们之间的耦合关系,以提升各自的独立性、弹性、交互操作性(相互合作性,interoperability),诞生了STL...

    C语言与CPP编程
  • 使用 Vue.js 和 Flask 实现全栈单页面应用

    在本教程中,我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券