頁(yè)面布局(上):基于 Vue Router 命名路由實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航
我們依然以博客應(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 主題模板布局。
本系列教程首發(fā)在Laravel學(xué)院(laravelacademy.org),你可以點(diǎn)擊頁(yè)面左下角閱讀原文鏈接查看最新更新的教程。
