vue 中 命名視圖的用法


 

今天主要記錄  vue中命名視圖的用法

先奉上官網網址:https://router.vuejs.org/zh/guide/essentials/named-views.html

一般情況下,一個頁面里面可能有多個組件,比如側邊欄,內容區,側邊欄是一個組件、內容區是一個組件,我們普遍會將兩個組件作為子組件添加到主頁面中,因為頁面中只有一個

router-view視圖,那么問題來了,怎么讓一個頁面中有多個視圖呢,擁有多個視圖,很隨意,多寫幾個router-view標簽就行了,但是每個router-view視圖里面顯示的相同的內容,這是一個問題,多寫幾個視圖好像沒什么用,那么怎么讓一個頁面中的多個視圖顯示不同的內容呢?

下面就來介紹命名視圖的作用,首先,一般情況下,我們在路由配置中,一個路由路徑只能對應一個組件,若想對應多個組件,必須得作為子組件存在,然后再一個公用的視圖內顯示,這是一個路由對應多個組件,這些組件對應一個視圖

例如:

{
  path:'tv',
  name:'tv',
  component:Tv,
  children:[
    {path:'',component:Zhonghe},
    {path:'zhonghe',component:Zhonghe},
    {path:'guochan',component:Guochan},
    {path:'yingmei',component:Yingmei},
    {path:'riju',component:Riju},
    {path:'hanju',component:Hanju}
  ]
},

那么,下面來介紹命名視圖:有時候想同時 (同級) 展示多個視圖,而不是嵌套展示,例如創建一個布局,有 sidebar (側導航) 和 main (主內容) 兩個視圖,這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖,而不是只有一個單獨的出口。如果 router-view 沒有設置名字,那么默認為 default

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>

<router-view class="view three" name="b"></router-view>

一個視圖使用一個組件渲染,因此對於同個路由,多個視圖就需要多個組件。確保正確使用 components配置 (帶上 s):

const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })
解釋一下:
在這個默認路由下,
第一個非未命名視圖顯示Foo組件
第二個name名為a的視圖顯示Bar組件
第二個name名為b的視圖顯示Baz組件




然后自己有些了個demo
<template>
  <div class="hello">
    <ul class="nav">
      <li><router-link to="/list1">list1</router-link></li>
      <li><router-link to="/list2">list2</router-link></li>
      <li><router-link to="/list3">list3</router-link></li>
    </ul>
    <h6>默認視圖</h6>
    <div class="view">
      <router-view></router-view>
    </div>
    <h6>a視圖</h6>
    <div class="view">
      <router-view name="a"></router-view>
    </div>
    <h6>b視圖</h6>
    <div class="view">
      <router-view name="b"></router-view>
    </div>
  </div>
</template>
 
router配置:
routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld,
    children:[
      {
        path:'',
        components:{
          default:List1,
          a:List2,
          b:List3
        }
      },
      {
        path:'list1',
        components:{
          default:List1,
          a:List2,
          b:List3
        }
       },
       {
        path:'list2',
        components:{
          default:List2,
          a:List1,
          b:List3
        }
      },
      {
        path:'list3',
        components:{
          default:List3,
          a:List1,
          b:List2
        }
      }
    ]
  }
]
 
這樣會讓也面很靈活,可以研究一下
 
 
 



 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM