頁面布局（上）：基于 Vue Router 命名路由實現(xiàn)動態(tài)路由導航

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

頁面布局模板

對于博客應用而言，除了首頁和關于頁面外，通常還有分類導航和反饋（聯(lián)系表單）等其他頁面：

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

開始之前，我們先在前端編寫相應的路由導航和頁面組件。

創(chuàng)建頁面組件

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

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

注冊頁面路由

然后在前端路由文件 resources/js/routes.js 中為這兩個頁面組件編寫路由導航代碼：

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 路由沒啥好說的，對于 category 路由，我們使用了 Vue Router 提供的動態(tài)路由和命名路由功能，從外部動態(tài)傳遞路由參數(shù)來指定分類名稱，然后在 Vue 頁面組件中解析渲染，因為不同分類的文章基本數(shù)據(jù)結(jié)構(gòu)是一致的，可以共用同一個頁面組件進行渲染。

在視圖模板引入路由

然后我們在視圖模板中使用這種方式傳遞分類路由參數(shù)：

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

    <hr>

    <!-- 使用 router-link 組件來導航 -->
    <!-- 通過傳入 `to` 屬性指定鏈接 -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <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 框架后端通過命名路由生成 URL 很像。

這樣一來，我們就可以在訪問項目首頁時看到這些導航鏈接了：

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

不過現(xiàn)在還不能在 Vue 分類頁面組件中動態(tài)解析路由參數(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 組件中通過 this.$route.params.name 訪問名為 name 的路由參數(shù)，我們還為其應用了字符串大寫轉(zhuǎn)化函數(shù)將其轉(zhuǎn)化為大寫格式輸出。

因為該路由參數(shù)會在不同分類間切換，所以需要基于 watch 編寫偵聽器代碼實時監(jiān)聽路由變化，然后對分類名稱做相應切換。

重新編譯前端資源，刷新應用首頁，此時所有路由導航都可以正常工作了，點擊 PHP 分類鏈接，就可以看到如下渲染效果（其他分類則會渲染對應的分類名稱）：

點擊 Feedback 鏈接，也可以正常渲染：

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