24、单页应用的布局扩展与认证机制

单页应用的布局扩展与认证机制

1. 布局扩展

1.1 创建布局

在项目中添加登录页面时，需要一个没有导航栏的屏幕，因为用户在未认证前不应看到任何受保护的路由。可以通过绑定隐藏导航栏组件，但更简洁的方法是将登录屏幕拆分为独立的布局。

1.1.1 登录布局

创建登录布局的步骤如下：
1. 在 ./src/login-layout.html 创建新的登录布局文件，并添加以下内容：

<template>
    <require from="login-styles.css"></require>
    <div class="container">
        <slot name="header"></slot>   
        <slot name="form"></slot>     
    </div>
</template>

此布局定义了两个插槽：
- "header" 插槽：用于渲染品牌风格的标题。
- "form" 插槽：用于渲染登录表单。

1.1.2 主布局

主布局需要从父组件通过数据绑定获取路由器，以在页面顶部渲染导航栏。因此，需要为该视图创建相应的视图模型。
1. 在 ./src/main-layout.js