vue-router中的router-view的困擾

剛開始接觸vue的時候有很長一段時間被router-view的渲染困擾着，不知道為什么明明有很多router-link和不同的router-view，但是為什么渲染的時候不會出現錯亂呢

這是我自己寫的一個demo

左側是一級路由，右邊顯示的是一級路由對應的組件右邊中first中含有二級路由

 routes: [
    {
      path: '/',
      name: 'first',
      component: first
    },{
      path: '/first',
      name: 'first',
      component: first,
      children:[{
        path:'/one',
        name:'one',
        component:one
      },{
        path:'/two',
        name:'two',
        component:two
      },{
        path:'/three',
        name:'three',
        component:three
      }]
    }

以上是路由的配置，其中first對應一個router-view

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

first下邊的子路由對應着一個router-view

<template>
<div id="content">
    <div>這是第一個工作區</div>
    <router-link to="/one">first-one</router-link><br>
    <router-link  to="/two">first-two</router-link><br>
    <router-link to="/three">first-three</router-link>
    <router-view></router-view>
</div>
</template>

 

這樣頁面中存在兩個router-view，但是渲染不會出現混亂原因是路由的級別不同，所處的組件不相同，渲染的時候是在同級進行渲染的

同級中不存在多個router-view的時候不會出現渲染混亂，但是當同級中出現多個router-view的時候就會出現混亂，解決方法就是使用命名視圖

<div id="app">
    <sidebar />
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>

在路由的配置中，設置對應路徑下對應router-view顯示的組件

 routes: [
    {
      path: '/',
      name: 'first',
      components: {
        b: third,
        a: second
      }
    }

 現在設置的根目錄下第一個和第二個視圖分別顯示的是second和third組件