摘要：使用能優(yōu)雅的構(gòu)建并且與單頁(yè)面應(yīng)用程序完美結(jié)合。我們將重點(diǎn)關(guān)注所需的所有部分，然后在后續(xù)教程中，我們將進(jìn)一步演示如何使用作為層。例如，如果用戶刷新路由，我們將需要匹配該路由并返回應(yīng)用程序模板。運(yùn)行應(yīng)用程序該基礎(chǔ)用于構(gòu)建具有和路由器的。

使用Laravel能優(yōu)雅的構(gòu)建API并且與Vue單頁(yè)面應(yīng)用程序（SPA）完美結(jié)合。在本教程中，我們將展示如何啟動(dòng)和運(yùn)行Vue路由器以及用于構(gòu)建SPA的Laravel后端。我們將重點(diǎn)關(guān)注所需的所有部分，然后在后續(xù)教程中，我們將進(jìn)一步演示如何使用Laravel作為API層。

Vue SPA如何運(yùn)行的：

第一個(gè)請(qǐng)求命中服務(wù)器端Laravel路由器

Laravel渲染SPA布局

后續(xù)請(qǐng)求利用history.pushStateAPI進(jìn)行URL導(dǎo)航，而無(wú)需重新加載頁(yè)面

Vue路由器可以配置為history模式或hash模式。默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。history 模式，這種模式充分利用?history.pushState?API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。

這里我們使用history模式，所以需要我們需要配置一個(gè)Laravel路由，該路由將匹配所有可能的URL，具體取決于用戶進(jìn)入Vue SPA的路由。例如，如果用戶刷新/hello路由，我們將需要匹配該路由并返回Vue SPA應(yīng)用程序模板。然后，Vue路由器將確定路由并渲染相應(yīng)的組件。

首先，我們創(chuàng)建一個(gè)新的Laravel項(xiàng)目，然后安裝Vue路由器NPM包：

laravel new vue-router
cd vue-router

# Link the project if you use Valet
valet link

# Install NPM dependencies and add vue-router
yarn install
yarn add vue-router # or npm install vue-router

這里的??是最頂層的出口，渲染最高級(jí)路由匹配到的組件。同樣地，一個(gè)被渲染組件同樣可以包含自己的嵌套?。

首先，我們將更新主要的JavaScript文件resources/assets/js/app.js并配置Vue路由器。用以下內(nèi)容替換app.js文件的內(nèi)容：

import Vue from "vue"
import VueRouter from "vue-router"http://導(dǎo)入并安裝VueRouter插件

Vue.use(VueRouter)

import App from "./views/App"http://作為App最外層應(yīng)用程序組件的組件
import Hello from "./views/Hello"http://導(dǎo)入自定義Hello組件
import Home from "./views/Home"http://導(dǎo)入自定義Home組件

//構(gòu)造一個(gè)VueRouter帶有配置對(duì)象的新實(shí)例
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,
});

然后我們需要?jiǎng)?chuàng)建一些文件，但首先，我們將介紹以下內(nèi)容app.js：

我們導(dǎo)入并安裝VueRouter插件Vue.use()

我們導(dǎo)入三個(gè)Vue組件：

作為App最外層應(yīng)用程序組件的組件，

一個(gè)Hello映射到組件/hello

一個(gè)Home映射到組件/home

我們構(gòu)造一個(gè)VueRouter帶有配置對(duì)象的新實(shí)例

我們App通過(guò)將組件傳遞給componentsVue構(gòu)造函數(shù)中的屬性來(lái)使Vue知道該組件

我們將router常量注入到新的Vue應(yīng)用程序中以訪問(wèn)this.$router和this.$route

該VueRouter構(gòu)造函數(shù)采用的路線，我們定義的路徑，名稱（就像Laravel的命名路線），并映射到路徑組件的數(shù)組。

我喜歡將我的路由定義移動(dòng)到我導(dǎo)入的多帶帶路由模塊中，但為了簡(jiǎn)單起見(jiàn)，我們將在主應(yīng)用程序文件中定義路由。

為了使Laravel mix成功運(yùn)行，我們需要定義三個(gè)組件：

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文件是我們應(yīng)用程序的最外層容器元素。在這個(gè)組件中，我們將使用Vue Router的標(biāo)簽定義應(yīng)用程序標(biāo)題和一些導(dǎo)航：

我們App組件中最重要的標(biāo)簽是標(biāo)簽，我們的路由器將呈現(xiàn)與路徑匹配的給定組件（即Home或Hello）。

我們需要定義的下一個(gè)組件位于resources/assets/js/views/Home.vue：

最后，我們定義Hello位于以下位置的組件resources/assets/js/views/Hello.vue：

我喜歡將我的可重用組件與特定于視圖的組件分開(kāi)，方法是將視圖組織到resources/assets/js/views文件夾和我真正可重用的組件中resources/assets/js/components。這是我的慣例，我發(fā)現(xiàn)它運(yùn)行良好，因此我可以輕松地分離哪些組件可以重用，哪些組件是特定于視圖的。

就前端而言，我們擁有運(yùn)行Vue應(yīng)用程序所需的一切！接下來(lái)，我們需要定義后端路由和服務(wù)器端模板。

我們利用像Laravel這樣的應(yīng)用程序框架和Vue SPA，以便我們可以構(gòu)建服務(wù)器端API來(lái)使用我們的應(yīng)用程序。我們還可以使用Blade來(lái)渲染我們的應(yīng)用程序并通過(guò)全局JavaScript對(duì)象公開(kāi)環(huán)境配置，這在我看來(lái)很方便。

在本教程中，我們不打算構(gòu)建API，但我們將進(jìn)行后續(xù)跟進(jìn)。這篇文章是關(guān)于連接Vue路由器的全部?jī)?nèi)容。

我們將在服務(wù)器端解決的第一件事是定義路由。打開(kāi)routes/web.php文件并使用以下內(nèi)容替換歡迎路徑：

where("any", ".*");

我們定義了一條全能路線，SpaController這意味著任何網(wǎng)絡(luò)路線都將映射到我們的SPA。如果我們沒(méi)有這樣做，并且用戶提出了請(qǐng)求/hello，Laravel會(huì)回復(fù)404。

接下來(lái)，我們需要?jiǎng)?chuàng)建SpaController并定義視圖：

php artisan make:controller SpaController

打開(kāi)SpaController并輸入以下內(nèi)容：

最后，輸入以下內(nèi)容resources/views/spa.blade.php：



    
    
    
    


    

        
    

    


我們已經(jīng)定義了#app包含AppVue將呈現(xiàn)的組件的必需元素，以及基于URL呈現(xiàn)適當(dāng)?shù)慕M件。
運(yùn)行應(yīng)用程序
該基礎(chǔ)用于構(gòu)建具有Vue和Vue路由器的SPA。我們需要構(gòu)建或JavaScript來(lái)測(cè)試它：
yarn watch # or npm run watch
如果您在瀏覽器中加載應(yīng)用程序，您應(yīng)該看到如下內(nèi)容：

原文地址https://laravel-news.com/usin...