Laravel8+Vuejs如何实现单页面应用

本文小编为大家详细介绍“Laravel8+Vuejs如何实现单页面应用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Laravel8+Vuejs如何实现单页面应用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1 我们的目标

在本文结束时我们需要构建出来一个什么来呢？很简单，我们将拥有一个内含两个页面的 SPA。如果我们点击其他页面，它将不会重载。下面看看项目最终效果。

2 Laravel 及 Vue JS 的安装

我们将以全新的 Laravel 为起点。通常我们可以通过如下指令创建一个新项目：

composer create-project laravel/laravel --prefer-dist laravel-vue-spa

创建完毕，已经拥有新项目了。随后需要在其中安装 Vue JS。

composer require laravel/ui

最后需要做的是，把 Vue JS 整合进 Laravel 项目。感谢上苍，我们可以用如下指令帮助我们整合。非常之简单。

php artisan ui vue

不要忘了在发生变化之时编译 Vue。

npm install && npm run dev

3 Vue Router 以及文件结构

由于在 SPA 中，用户可以通过路由导航到他们想要抵达的页面。所以需要在其中安装一个附加库，Vue Router。

npm install vue-router

实现 SPA 前最重要的步骤就是文件结构。在 resources/js 目录下创建新的文件夹及文件，代码结构如下图所示。

在 resources/js 目录下，需要创建一个名为 layouts 的新目录，以及 pages 目录。layouts 目录所包含的内容如你所想，用于展示 pages 目录下页面的布局文件。疑惑么？这在随后实现 SPA 的过程中会让其结构更为清晰。

不要忘记创建 router.js 文件，用于存储我们所需的所有路由。

4 SPA 实现

是时候实现 SPA 了！首先，修改下 router.js 文件（在 resources/js/router.js）

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

import Home from './pages/Home.vue';
import About from './pages/About.vue';

Vue.use(VueRouter);

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

export default router;

在第四行和第五航，我们需要在这里配置两个页面，主页和关于页。我知道，目前还没有这两个页面。随后我们将会创建它们。在第 9-24 行，我们将注册需要的所有路由信息。因此每个路由对象都有 path，name 以及 component 属性用于渲染/展示。

已经把路由准备完毕了，现在要做什么呢？我们将在布局文件中展示这些页面。记得已经在 layouts 目录中的 App.vue 么？来创建它吧。

<template>
  <div>
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
      <router-link :to="{ name: 'home' }" class="navbar-brand"
        >Laravel-Vue SPA</router-link
      >
      <button
        class="navbar-toggler"
        data-toggle="collapse"
        data-target="#navbarCollapse"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link
              class="nav-link"
              data-toggle="collapse"
              :to="{ name: 'home' }"
            >
              Home
            </router-link>
          </li>

          <li class="nav-item">
            <router-link
              class="nav-link"
              data-toggle="collapse"
              :to="{ name: 'about' }"
            >
              About
            </router-link>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    $route() {
      $("#navbarCollapse").collapse("hide");
    },
  },
};
</script>

注意 17-23 行，这里使用了 \ 标签。这个路由链接与 \ 标签很像，用于在多个页面中导航跳转。所以问题来了，页面会在哪里渲染呢？看 40行的 \ 标签，所以页面将会在 \ 标签处被渲染。

好了，还有首页和关于页面没有创建呢。打开 pages 目录下的 Home.vue 页面。

<template>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">About</div>

          <div class="card-body">About Page</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

直到这一步，我们才设置 SPA 页面间跳转的路由以及展示页面的布局。最后我们需要做的是，修改 Vue JS 的入口文件。

打开 resource/js/app.js 然后修改。

/**
 * 首先，我们将重载项目中所有包含 Vue 或其他库的 JavaScript 依赖
 * 使用 Vue 和 Laravel 构建健壮、强大的 web 应用，这是个很好的开始。
 */

require('./bootstrap');

window.Vue = require('vue').default;

import router from './router';
import App from './layouts/App.vue';

/**
 * 如下代码块可用于自动注册 Vue 组件。这将递归的扫描 Vue 组件目录
 * 并按照其 "文件名" 自动注册。
 *
 * 比如 . ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * 随后，我们将创建一个新的 Vue 应用实例并将其挂载到页面。
 * 然后，你可以附加组件到应用中或自定义 JavaScript 脚手架以满足特殊需求。
 */

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

在第 11 行和 12 行，引入了布局文件和路由文件，在 34 行，告诉 Vue 使用路由并在 36 行指定渲染到指定布局。

万事俱备，是时候告诉 Laravel 通过 Vuejs 实现 SPA 了。打开 routes/web.php 并在此创建其他入口。

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web 路由
|--------------------------------------------------------------------------
|
| 这里是注册应用 web 路由的地方。这些路由将会被 RouteServiceProvider 加载
| 也就是那些包含了 "web" 中间件的路由组会加载这些路由。
| 现在继续创建一些有意思的东西！
|
*/

Route::get('/{any}', function () {
    return view('layouts.vue');
})->where('any', '.*');

在如上代码中，我们告诉 Laravel 用户所有访问都将返回 resources/views/layouts/vue.blade.php 文件。很明显，我们还没有这个文件，一起创建下。

<!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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>

    <div id="app"></div>

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

</html>

好了，这里有两个重点。第一个重点，在 16 行，创建了一个 id 为 “app” 的

标签。为何这很重要呢？因为 Vue 只能渲染到标致 id 为 “app” 的 div（或其他标签）上。如果你还记得 resources/js/app.js 的 35 行，我们告诉 Vue ，渲染到 id 为 “app” 的标签上。第二个重点是在 18 行，我们引入了编译后的 Vue JS 文件。

就先这样了。在你去测试前，请确保编译了 Vue JS 脚本：

npm run dev

然后运行服务并在浏览器中打开。

读到这里，这篇“Laravel8+Vuejs如何实现单页面应用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。