?? Vue Router 中 name 屬性的作用詳解

在使用 Vue Router 定義路由時(shí)，我們常常會(huì)看到如下結(jié)構(gòu)：

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/text',
      name: 'text',
      component: text
    },
    {
      path: '/text/:id',
      component: param
    }
  ]
})

其中的 name 屬性是可選的，不寫它似乎也“沒問題”，但其實(shí)它在某些場景中非常重要。下面我們來詳細(xì)說明它的作用和典型用法。

? 一、命名視圖（Named Views）——為多個(gè) <router-view> 渲染不同組件

這是 name 最核心也是最官方推薦的用途之一。

場景說明：

如果你在一個(gè)頁面中有多個(gè) <router-view>，你可以通過給路由配置 name，來指定每個(gè)視圖應(yīng)該渲染哪個(gè)組件。

示例代碼：

<template>
  <div id="app">
    <!-- 默認(rèn)視圖 -->
    <router-view></router-view>
    <!-- 命名視圖 -->
    <router-view name="Hello"></router-view> <!-- 顯示 name 為 'Hello' 的路由組件 -->
    <router-view name="text"></router-view>   <!-- 顯示 name 為 'text' 的路由組件 -->
  </div>
</template>

對應(yīng)的路由配置：

routes: [
  {
    path: '/',
    components: {
      default: DefaultComponent,
      Hello: Hello,
      text: Text
    }
  }
]

?? 注意：

• 如果你沒有給路由設(shè)置 name，那么該組件只能作為默認(rèn)視圖 (default) 渲染。
• 要想渲染到命名視圖中，必須定義 name 并在 components 字段中引用它。

? 二、獲取當(dāng)前路由名稱 —— $route.name

你可以通過 $route.name 獲取當(dāng)前激活路由的 name 值，這在動(dòng)態(tài)控制組件行為或埋點(diǎn)日志中很有用。

示例代碼：

<template>
  <div id="app">
    <p>當(dāng)前路由名稱是：{{ $route.name }}</p>
    <router-view></router-view>
  </div>
</template>

當(dāng)訪問 / 路徑時(shí)，頁面上將顯示：

當(dāng)前路由名稱是：Hello

?? 這種方式比 $route.path 更語義化，便于業(yè)務(wù)邏輯判斷。

? 三、params 傳參的必要條件 —— 必須通過 name 來跳轉(zhuǎn)

Vue Router 提供了兩種傳參方式：query 和 params。

使用 name 配合 params 傳參：

<router-link :to="{ name: 'register', params: { id: 10, name: 'lili' } }">
  注冊
</router-link>

對應(yīng)的路由配置：

{
  name: 'register',
  path: '/register/:id/:name',
  component: register
}

在目標(biāo)組件中可以通過以下方式獲取參數(shù)：

this.$route.params.id
this.$route.params.name

?? 注意：

• 如果你不給路由設(shè)置 name，則無法使用 params 方式進(jìn)行導(dǎo)航。
• params 參數(shù)不會(huì)保留在地址欄刷新后（除非你在 path 中顯式聲明了參數(shù)）。

?? 總結(jié)：

name 的三大主要用途

?? 建議

即使你暫時(shí)不需要使用上述功能，也建議為每個(gè)路由添加一個(gè)有意義的 name，這樣可以提升項(xiàng)目的可維護(hù)性和擴(kuò)展性。

如果你想了解 query 和 params 更詳細(xì)的對比，或者如何實(shí)現(xiàn)帶 name 的動(dòng)態(tài)路由加載，也可以繼續(xù)問我！

到此這篇關(guān)于VUE路由name的用法詳解的文章就介紹到這了,更多相關(guān)vue 路由name內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論