超级会员免费看
单页应用的布局扩展与认证机制
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
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
