我們依然以博客應(yīng)用為例演示基于 Laravel + Vue 框架構(gòu)建單頁(yè)面應(yīng)用。

頁(yè)面布局模板

對(duì)于博客應(yīng)用而言，除了首頁(yè)和關(guān)于頁(yè)面外，通常還有分類導(dǎo)航和反饋（聯(lián)系表單）等其他頁(yè)面：

下面我們以上述 WordPress 博客 Twenty Fifteen 主題模板為藍(lán)本，基于 Laravel + Vue 構(gòu)建單頁(yè)面博客應(yīng)用。

開(kāi)始之前，我們先在前端編寫相應(yīng)的路由導(dǎo)航和頁(yè)面組件。

創(chuàng)建頁(yè)面組件

首先在 resources/js/components 目錄下新建分類導(dǎo)航頁(yè)面組件 Category.vue 和用戶反饋?lái)?yè)面組件 Feedback.vue，基本代碼結(jié)構(gòu)和上篇教程創(chuàng)建的 Home.vue 和 About.vue 一樣：

暫時(shí)不實(shí)現(xiàn)具體渲染內(nèi)容。

注冊(cè)頁(yè)面路由

然后在前端路由文件 resources/js/routes.js 中為這兩個(gè)頁(yè)面組件編寫路由導(dǎo)航代碼：

export default {
    mode: 'history',

    routes: [
        {
            path: '/',
            component: require('./components/Home').default
        },
        {
            path: '/about',
            component: require('./components/About').default
        },
        {
            path: '/feedback',
            component: require('./components/Feedback').default
        },
        {
            path: '/:name',
            name: 'category',
            component: require('./components/Category').default
        }
    ]
}

feedback 路由沒(méi)啥好說(shuō)的，對(duì)于 category 路由，我們使用了 Vue Router 提供的動(dòng)態(tài)路由和命名路由功能，從外部動(dòng)態(tài)傳遞路由參數(shù)來(lái)指定分類名稱，然后在 Vue 頁(yè)面組件中解析渲染，因?yàn)椴煌诸惖奈恼禄緮?shù)據(jù)結(jié)構(gòu)是一致的，可以共用同一個(gè)頁(yè)面組件進(jìn)行渲染。

在視圖模板引入路由

然后我們?cè)谝晥D模板中使用這種方式傳遞分類路由參數(shù)：

<div id="app">
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>

    <hr>

    <!-- 使用 router-link 組件來(lái)導(dǎo)航 -->
    <!-- 通過(guò)傳入 `to` 屬性指定鏈接 -->
    <!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
    <router-link to="/">Home</router-link>
    <!-- 傳遞路由參數(shù)到命名路由 -->
    <router-link :to="{ name: 'category', params: { name: 'php' }}">PHP</router-link>
    <router-link :to="{ name: 'category', params: { name: 'golang' }}">Golang</router-link>
    <router-link :to="{ name: 'category', params: { name: 'javascript' }}">Javascript</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/feedback">Feedback</router-link>
</div>

和 Laravel 框架后端通過(guò)命名路由生成 URL 很像。

這樣一來(lái)，我們就可以在訪問(wèn)項(xiàng)目首頁(yè)時(shí)看到這些導(dǎo)航鏈接了：

在頁(yè)面組件中獲取動(dòng)態(tài)路由參數(shù)

不過(guò)現(xiàn)在還不能在 Vue 分類頁(yè)面組件中動(dòng)態(tài)解析路由參數(shù)，我們需要編寫如下偵聽(tīng)器代碼實(shí)現(xiàn)：

<template>
    <h1>Category: {{ name }}</h1>
</template>

<script>
export default {
    data () {
        return {
            name: ''
        }
    },
    mounted () {
        this.updateCategoryName();
    },
    watch: {
        '$route': 'updateCategoryName'
    },
    methods: {
        updateCategoryName ()  {
            this.name = this.$route.params.name.toUpperCase();
        },
    }
}
</script>

如上述代碼所示，我們可以在使用了 Vue Router 的 Vue 組件中通過(guò) this.$route.params.name 訪問(wèn)名為 name 的路由參數(shù)，我們還為其應(yīng)用了字符串大寫轉(zhuǎn)化函數(shù)將其轉(zhuǎn)化為大寫格式輸出。

因?yàn)樵撀酚蓞?shù)會(huì)在不同分類間切換，所以需要基于 watch 編寫偵聽(tīng)器代碼實(shí)時(shí)監(jiān)聽(tīng)路由變化，然后對(duì)分類名稱做相應(yīng)切換。

重新編譯前端資源，刷新應(yīng)用首頁(yè)，此時(shí)所有路由導(dǎo)航都可以正常工作了，點(diǎn)擊 PHP 分類鏈接，就可以看到如下渲染效果（其他分類則會(huì)渲染對(duì)應(yīng)的分類名稱）：

點(diǎn)擊 Feedback 鏈接，也可以正常渲染：

當(dāng)然，這樣的頁(yè)面太丑了，下篇教程，學(xué)院君將引入 Tailwind CSS 框架來(lái)重構(gòu) UI 界面，實(shí)現(xiàn)類似本篇開(kāi)頭給出的 Wordpress 主題模板布局。