Shulou(Shulou.com)06/02 Report--

This article mainly explains "Laravel8+Vuejs how to create SPA single page application", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Laravel8+Vuejs how to create SPA single page application" bar!

As we all know, Laravel is a great framework! It allows full stack engineers to build front and back end websites in one stop. As a result, we can quickly build and deliver high-quality and secure web projects. But it's more powerful than that.

Laravel still has a lot to explore. For example, Chestnut, we have written a series of Vue JS components that can be embedded in Laravel pages to dynamically provide users with UI interaction.

Isn't that interesting? But the next thing we need to explore is whether it is possible to build a single page application (SPA) in a Laravel project. Of course, why not! [related recommendation: vue.js tutorial]

Before we start, we need to know why our project needs SPA. There is no denying that SPA gives users a better experience. It makes the page load faster, no need to reload, even if the user does not have a network to access the site! These examples go on and on.

Of course, this will also bring some disadvantages, and you still need to think twice before using it. Whether you are building SPA or MPA (multi-page applications), make sure it meets your needs. But Laravel makes us build a MAP project by default, doesn't it? So I think it's time for us to explore how to build SPA in a Laravel project. Official departure!

Content overview

Our goal

Installation of Laravel and Vue JS

Vue Router and file structure

SPA implementation

1 our goal

What do we need to build at the end of this article? Quite simply, we will have a SPA with two pages in it. If we click on another page, it will not be reloaded. Let's take a look at the final results of the project.

2 installation of Laravel and Vue JS

We will start with a new Laravel. Usually we can create a new project with the following instructions:

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

Once created, you already have a new project. You then need to install Vue JS in it.

Composer require laravel/ui

The last thing you need to do is integrate Vue JS into the Laravel project. Thank God, we can use the following instructions to help us integrate. It's very simple.

Php artisan ui vue

Don't forget to compile Vue when changes occur.

Npm install & & npm run dev

3 Vue Router and file structure

Because in SPA, users can navigate to the page they want to reach by route. So you need to install an additional library, Vue Router.

Npm install vue-router

The most important step before implementing SPA is the file structure. Create a new folder and file under the resources/js directory with the code structure shown in the following figure.

Under the resources/js directory, you need to create a new directory called layouts, as well as the pages directory. The contents of the layouts directory, as you might expect, are used to display the layout files of the pages in the pages directory. Are you confused? This will make its structure clearer in the subsequent implementation of SPA.

Don't forget to create a router.js file to store all the routes we need.

4 SPA implementation

It's time to implement SPA! First, modify the router.js file (in 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

On the fourth line and the fifth flight, we need to configure two pages here, the home page and the about page. I know that there are no two pages yet. Then we will create them. On lines 9-24, we will register all the routing information we need. So each routing object has path,name and component attributes for rendering / presentation.

Now that the route is ready, what should we do now? We will show these pages in the layout file. Remember the App.vue that is already in the layouts directory? Let's create it.

Laravel-Vue SPA Home About export default {watch: {$route () {$("# navbarCollapse") .collapse ("hide") },},}

Notice lines 17-23, where the\ tag is used. This routing link is very similar to the\ tag and is used to navigate through multiple pages. So the question is, where will the page be rendered? Look at the\ tag on line 40, so the page will be rendered at the\ tag.

Well, there are still home pages and about pages that haven't been created yet. Open the Home.vue page in the pages directory.

About About Page export default {}

It is not until this step that we set up the route to jump between SPA pages and the layout of the display page. The last thing we need to do is to modify the entry file of Vue JS.

Open resource/js/app.js and modify it.

/ * first of all, we will reload all JavaScript dependencies in the project that contain Vue or other libraries * to build robust and powerful web applications using Vue and Laravel, which is a good start. * / require ('. / bootstrap'); window.Vue = require ('vue'). Default;import router from'. / router';import App from'. / layouts/App.vue';/** * the following code blocks can be used to automatically register Vue components. This will recursively scan the Vue component directory * and automatically register according to its "file name". * * for example. . / components/ExampleComponent.vue-> * / 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) Then, we will create a new Vue application instance and mount it to the page. * you can then add components to the application or customize JavaScript scaffolding to meet special needs. * / const app = new Vue ({router, el:'# app', render: h = > h (App)})

On lines 11 and 12, the layout file and route file are introduced, and on line 34, tell Vue to use the route and specify rendering to the specified layout on line 36.

Everything is ready, and it's time to tell Laravel to implement SPA through Vuejs. Open routes/web.php and create additional portals here.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.