1、命名路由

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

const router = new VueRouter({

routes: [

{

path: ‘/aaa/bbb/about’,

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

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

]

})

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

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

2、命名視圖

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

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

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

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

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

通過樣式控制三個 router-view 的布局 :