router-view 是Vue Router 實(shí)現(xiàn)頁(yè)面切換的核心組件，它作為插槽佔(zhàn)位符，自動(dòng)渲染匹配到的路由組件?；居梅ㄊ窃贏pp.vue 或佈局組件中添加<router-view></router-view>，URL 變化時(shí)會(huì)自動(dòng)顯示對(duì)應(yīng)組件；嵌套路由需在父組件中添加router-view 以展示子路由內(nèi)容；命名視圖通過(guò)給多個(gè)router-view 指定名稱(chēng)，並在路由配置中使用components 分別指定組件；動(dòng)態(tài)緩存可通過(guò)keep-alive 包裹router-view 並結(jié)合meta 屬性控制是否保留組件狀態(tài)。掌握這些要點(diǎn)能有效構(gòu)建靈活的路由結(jié)構(gòu)。

用好router-view這個(gè)組件，其實(shí)不難，但它是Vue Router 實(shí)現(xiàn)頁(yè)面切換的核心。

什麼是router-view ？

router-view是Vue Router 提供的一個(gè)插槽組件，它告訴Vue Router： “我要在這裡展示匹配到的路由組件” 。你可以把它理解為一個(gè)“佔(zhàn)位符”，當(dāng)URL 改變時(shí)，Vue Router 會(huì)根據(jù)當(dāng)前路徑自動(dòng)把對(duì)應(yīng)的組件渲染到這裡。

它默認(rèn)是命名視圖中的default ，也就是說(shuō)如果你沒(méi)做額外配置，只要在模板中寫(xiě)上<router-view></router-view> ，就能顯示主內(nèi)容區(qū)域。

基本使用方式

最簡(jiǎn)單的用法就是直接放在App.vue 或佈局組件中：

 <template>
  <div id="app">
    <router-view />
  </div>
</template>

這樣，當(dāng)你訪問(wèn)/about ，就會(huì)顯示About組件，訪問(wèn)/home就顯示Home組件。不需要手動(dòng)控制哪個(gè)組件顯示，Vue Router 會(huì)幫你搞定。

常見(jiàn)錯(cuò)誤提醒：

• 忘記放<router-view> ，頁(yè)面空白也不奇怪?
• 多層嵌套路由時(shí)，子路由的內(nèi)容也不會(huì)自動(dòng)出現(xiàn)，得在父組件裡加一個(gè)router-view

嵌套路由怎麼用router-view？

嵌套路由（Nested Routes）是構(gòu)建多級(jí)頁(yè)面結(jié)構(gòu)的關(guān)鍵，比如你有/user/123/profile和/user/123/settings ，它們都屬於/user/:id的子頁(yè)面。

這時(shí)候就需要在父組件中添加一個(gè)router-view來(lái)展示子路由的內(nèi)容。

舉個(gè)例子：

 const routes = [
  {
    path: '/user/:id',
    component: UserLayout,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'settings', component: UserSettings }
    ]
  }
]

然後在UserLayout.vue中：

 <template>
  <div>
    <h1>User Layout</h1>
    <router-view /> <!-- 子路由組件會(huì)顯示在這裡-->
  </div>
</template>

這樣當(dāng)你訪問(wèn)/user/123/profile ， UserProfile就會(huì)被渲染在這個(gè)router-view裡面。

多個(gè)命名視圖怎麼用？

有時(shí)候你想在一個(gè)頁(yè)面上同時(shí)顯示多個(gè)不同區(qū)域的內(nèi)容，比如導(dǎo)航欄、側(cè)邊欄、主內(nèi)容區(qū)，這時(shí)候就可以用命名視圖（Named Views） 。

你需要給每個(gè)router-view起個(gè)名字：

 <template>
  <div>
    <router-view name="header" />
    <router-view />
    <router-view name="sidebar" />
  </div>
</template>

然後在路由配置中指定每個(gè)視圖對(duì)應(yīng)哪個(gè)組件：

 {
  path: '/',
  components: {
    default: MainContent,
    header: HeaderBar,
    sidebar: SideMenu
  }
}

注意這裡用了components （複數(shù)），而不是component 。這種用法不太常見(jiàn)，但適合需要分塊管理的大項(xiàng)目。

動(dòng)態(tài)緩存router-view 內(nèi)容

有時(shí)候你希望切換路由時(shí)不銷(xiāo)毀組件，保留狀態(tài)，比如表單輸入、滾動(dòng)位置等，可以用<keep-alive>包裹router-view ：

 <keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

或者更簡(jiǎn)潔的方式：

 <keep-alive>
  <router-view v-slot="{ Component }">
    <component :is="Component" v-if="$route.meta.keepAlive" />
  </router-view>
</keep-alive>
<router-view v-slot="{ Component }">
  <component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>

這需要你在路由配置中設(shè)置meta: { keepAlive: true }來(lái)決定哪些頁(yè)面需要緩存。

基本上就這些。
router-view看起來(lái)簡(jiǎn)單，但配合嵌套路由、命名視圖、緩存等功能後，能玩出不少花樣。掌握好它的用法，對(duì)構(gòu)建清晰的路由結(jié)構(gòu)很有幫助。

以上是如何使用路由器視圖組件？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！