1、命名路由

對于網(wǎng)站開發(fā)而言，在某些時(shí)候，我們期望生成的路由 URL 地址可能會(huì)很長，在使用中可能會(huì)顯得有些不便。這時(shí)候通過一個(gè)名稱來標(biāo)識一個(gè)路由會(huì)更方便一些，因此在 Vue Router 中，我們可以在創(chuàng)建 Router 實(shí)例的時(shí)候，通過在 routes 配置中給某個(gè)路由設(shè)置名稱，從而方便的調(diào)用路由。如：

const router = new VueRouter({

routes: [

{

path: ‘/aaa/bbb/about’,

name: ‘a(chǎn)bout’,

component: ‘<div>about 組件</div>’ }

]

})

當(dāng)我們使用命名路由之后，當(dāng)需要使用 router-link 標(biāo)簽進(jìn)行跳轉(zhuǎn)時(shí)，就可以采取給 router-link 的 to 屬性綁定一個(gè)對象的方式，跳轉(zhuǎn)到指定的路由地址上。如：

<router-link :to=“{ name: ‘a(chǎn)bout’}”>關(guān)于我們</router-link>

2、命名視圖

當(dāng)我們打開一個(gè)頁面時(shí)，整個(gè)頁面可能是由多個(gè) Vue 組件所構(gòu)成的，例如，我們的后臺(tái)管理首頁可能是由 sidebar (側(cè)導(dǎo)航) 、header（頂部導(dǎo)航）和 main (主內(nèi)容）這三個(gè) Vue 組件構(gòu)成的。此時(shí)，當(dāng)我們通過 Vue Router 構(gòu)建路由信息時(shí)，如果一個(gè) URL 只能對應(yīng)一個(gè) Vue 組件，整個(gè)頁面肯定是無法正確顯示的。

通過 router-view 標(biāo)簽，我們就可以指定組件渲染顯示到什么位置。因此，當(dāng)我們需要在一個(gè)頁面上顯示多個(gè)組件的時(shí)候，就需要在頁面中添加多個(gè)的 router-view 標(biāo)簽。

那么，是不是可以通過一個(gè)路由對應(yīng)多個(gè)組件（這不可以），然后按需渲染在不同的 router-view 標(biāo)簽上呢？默認(rèn)情況下不能，當(dāng)我 們 將 一 個(gè) 路 由 信 息 對 應(yīng) 到 多 個(gè) 組 件 時(shí) ， 不 管 有 多 少 個(gè) 的router-view 標(biāo) 簽 ， 程 序 都 會(huì) 將 第 一 個(gè) 組 件 渲 染 到 所 有 的router-view 標(biāo)簽上。

那怎么辦呢？我們需要實(shí)現(xiàn)的是一個(gè)路由信息可以按照我們的需要去渲染到頁面中指定的 router-view 標(biāo)簽上，需要通過VueRouter 命名視圖的方式實(shí)現(xiàn)我們的需求。

命名視圖，與命名路由的實(shí)現(xiàn)方式相似，命名視圖通過在router-view 標(biāo)簽上設(shè)定 name 屬性，之后，在構(gòu)建路由與組件的對應(yīng)關(guān)系時(shí)，以一種 name:component 的形式構(gòu)造出一個(gè)組件對象，從而指明是在哪個(gè) router-view 標(biāo)簽上加載什么組件。注意，這里在指定路由對應(yīng)的組件時(shí)，使用的是 components（包含 s）屬性進(jìn)行配置組件

通過樣式控制三個(gè) router-view 的布局 :