Vue Router 命名视图

命名视图

命名视图

同时(同级)展示多个视图，而不是嵌套展示，可以使用命名视图。

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。

如果<router-view>没有设置名字，那么默认为default。

说到这里，插一个题外话。由vue-cli脚手架生成的文件目录，可以看到views和components中都放置vue组件。那么有什么区别？

两个文件夹都放置vue组件，但某些vue组件充当路由视图。components中的vue组件不太可能在路由中使用(路由配置)，而views中的vue组件至少由一条路由使用。

<div id="app">
    <router-view></router-view>
    <router-view name="LeftSidebar"></router-view>
    <router-view name="RightSidebar"></router-view>
  </div>

{
        path: '/',
        name: 'Home',
        components: {
            default: () => import('@/views/Home'),
            LeftSidebar: () => import('@/views/LeftSidebar'),
            RightSidebar: () => import('@/views/RightSidebar')
        }
    }

访问/路径时映射到对应路由，根据<router-view>有无name，具体name名来渲染不同组件。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。

嵌套命名视图

使用命名视图创建嵌套视图。

UserSettings.vue：

<router-view></router-view>
<router-view name="helper"></router-view>

router.js：

{
        path: '/settings',
        components: UserSettings,
        children: [
            {
                path: 'emails',
                component: UserEmailsSubscriptions
            },
            {
                path: 'profile',
                components: {
                    default: UserProfile,
                    helper: UserProfilePreview
                }
            }
        ]
    }

通过/settings路径映射到组件UserSettings，UserSettings有两个视图，一个默认视图一个命名视图，通过/settings/后面的内容找到对应嵌套路由中的组件。

如果是路径/settings/emails，则先通过/settings加载UserSettings，再通过/emails加载UserEmailsSubscriptions到默认视图中，因为并没有在/emails的路由中找到嵌套视图的配置，所以命名视图的位置并不渲染任何组件。