vuex全家桶系列08-命名视图

有时候想同时 (同级) 展示多个视图，⽽不是嵌套展示，例如创建⼀个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上⽤场了。

🍊先来看下router/index.js:

   {
      path:"/",
      name:"home",
      // component:Home
      components:{
        default:Home,
        main:()=> import ("@/views/Main"),
        slidebar:()=>import ("@/views/SlideBar")
      }
    }

🍊紧接着，再来看下App.vue中需要做的改变：

• 每个router-view其实就是一个div,添加name后即可渲染出来。

<template>
<div id="app">
    <div id="nav">
        <router-link :to="{name:'home'}">首页</router-link>
        <!-- 路由组件的出口 -->
        <router-view></router-view>

        <router-view name="main"></router-view>
        <router-view name="slidebar"></router-view>
    </div>
</div>
</template>