Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）
2024-04-24 04:48:17
本次演示，项目所需
iview，router
首先
在 views 目录 新建 两个 组件 ( login.vue ，index.vue )
login.vue
<template><div class="wrap" id="wrap"><div class="logGet"><!-- 头部提示信息 --><div class="logD logDtip"><p class="p1">登录</p></div><!-- 输入框 --><div class="lgD"><img src="assets/logo.png" width="20" height="20" alt="" /><input type="text" placeholder="输入用户名" /></div><div class="lgD"><img src="img/logPwd.png" width="20" height="20" alt="" /><input type="text" placeholder="输入用户密码" /></div><div class="logC"><a><button @click="login">登 录</button></a></div></div></div>
</template><script>export default {methods: {login() {// 假设登陆成功，则跳转到 index 组件this.$router.replace('/index');}}}
</script><style>body {background-image: url(../assets/timg2.jpg);background-size: 100%;background-repeat: no-repeat;background-position: center center;}* {margin: 0;padding: 0;}#wrap {height: 600px;width: 100%;background-position: center center;position: relative;}#head {height: 120px;width: 100;background-color: #66CCCC;text-align: center;position: relative;}#wrap .logGet {height: 408px;width: 368px;position: absolute;background-color: #FFFFFF;top: 100px;right: 15%;}.logC a button {width: 100%;height: 45px;background-color: #ee7700;border: none;color: white;font-size: 18px;}.logGet .logD.logDtip .p1 {display: inline-block;font-size: 28px;margin-top: 30px;width: 86%;}#wrap .logGet .logD.logDtip {width: 86%;border-bottom: 1px solid #ee7700;margin-bottom: 60px;margin-top: 0px;margin-right: auto;margin-left: auto;}.logGet .lgD img {position: absolute;top: 12px;left: 8px;}.logGet .lgD input {width: 100%;height: 42px;text-indent: 2.5rem;}#wrap .logGet .lgD {width: 86%;position: relative;margin-bottom: 30px;margin-top: 30px;margin-right: auto;margin-left: auto;}#wrap .logGet .logC {width: 86%;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;}.title {font-family: "宋体";color: #FFFFFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/* 使用css3的transform来实现 */font-size: 36px;height: 40px;width: 30%;}.copyright {font-family: "宋体";color: #FFFFFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/* 使用css3的transform来实现 */height: 60px;width: 40%;text-align: center;}
</style>
index.vue
<style scoped>.layout{border: 1px solid #d7dde4;background: #f5f7f9;position: relative;border-radius: 4px;overflow: hidden;
}
.layout-logo{width: 100px;height: 30px;background: #5b6270;border-radius: 3px;float: left;position: relative;top: 15px;left: 20px;
}
.layout-nav{width: 420px;margin: 0 auto;margin-right: 20px;
}
</style>
<template><div class="layout"><Layout><Header><Menu mode="horizontal" theme="dark" active-name="1"><div class="layout-logo"></div><div class="layout-nav"><MenuItem name="1"><Icon type="ios-navigate"></Icon>Item 1</MenuItem><MenuItem name="2"><Icon type="ios-keypad"></Icon>Item 2</MenuItem><MenuItem name="3"><Icon type="ios-analytics"></Icon>Item 3</MenuItem><MenuItem name="4"><Icon type="ios-paper"></Icon>Item 4</MenuItem></div></Menu></Header><Layout><Sider hide-trigger :style="{background: '#fff'}"><Menu active-name="1-2" theme="light" width="auto" :open-names="['1']"><Submenu name="1"><template slot="title"><Icon type="ios-navigate"></Icon>Item 1</template><router-link to="/one"><MenuItem name="1-1">Option 1</MenuItem></router-link><router-link to="/two"><MenuItem name="1-2">Option 2</MenuItem></router-link><MenuItem name="1-3">Option 3</MenuItem></Submenu><Submenu name="2"><template slot="title"><Icon type="ios-keypad"></Icon>Item 2</template><MenuItem name="2-1">Option 1</MenuItem><MenuItem name="2-2">Option 2</MenuItem></Submenu><Submenu name="3"><template slot="title"><Icon type="ios-analytics"></Icon>Item 3</template><MenuItem name="3-1">Option 1</MenuItem><MenuItem name="3-2">Option 2</MenuItem></Submenu></Menu></Sider><Layout :style="{padding: '0 24px 24px'}"><Breadcrumb :style="{margin: '24px 0'}"><BreadcrumbItem>Home</BreadcrumbItem><BreadcrumbItem>Components</BreadcrumbItem><BreadcrumbItem>Layout</BreadcrumbItem></Breadcrumb><Content :style="{padding: '24px', minHeight: '480px', background: '#fff'}"><!-- 渲染组件 --><router-view></router-view></Content></Layout></Layout></Layout></div>
</template>
<script>export default {}
</script>
index.vue 要渲染两个组件( 子组件，模拟 )
在 components 目录 中 新建两个 vue 文件
one.vue
<template><div>index 页面 里 的 第一个 组件</div></template><script>export default {data() {return {};}}
</script><style></style>
two.vue
<template><div>index 页面 里 的 第二个 组件</div>
</template><script>export default {data() {return {};}}
</script><style></style>
修改 App.vue 文件
直接下来，在main.js 中 导入login 和 index 两个模块
在 router.js 文件 中 注册 组件
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)export default new Router({routes: [//一级路由{path: '/',name: 'login',component: () => import('./views/login.vue')},{path:'/index',name:'index',component: () => import('./views/index.vue'),children:[//二级路由{path:'/one',name:'one',component:() => import('./components/one.vue')},{path:'/two',name:'two',component:() => import('./components/two.vue')}]}]
})
根目录下，访问直接是 显示 login.vue 组件
效果：
Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）相关推荐
- vue导入html登陆页,Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）
本次演示,项目所需 iview,router 首先 在 views 目录 新建 两个 组件 ( login.vue ,index.vue ) login.vue 登录 登 录 export defau ...
- 远程登陆时，页面登陆不了，提示“user profile serveice服务未能登陆”
解决方案一: 步骤: 1, 开机按F8,从安全模式启动. 2, 按windows+R,键入"regedit"回车 3, 进入:HLM\Software\Microsoft\Wind ...
- tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片...
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...
- Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用 把公共组件放在 app.v ...
- vue项目 登陆逻辑 和 页面加载逻辑
最近修改了俩个vue项目登陆逻辑,摸摸摸,三改四改,总结了一些思路: 文章目录 首先,理清好思路 1.什么样的情况下是登陆状态(初始化加载 => App.vue) 2. 没有登陆的情况下,项目的 ...
- Vue中登陆超时，返回登陆页面
首先登陆时,将登陆接口返回的 token 用 localStorage 保存起来,然后在 axios 的请求拦截里将 token 添加到请求头部 header 里,作为之后前后端的通信票据 // ax ...
- AbpVnext 扩展企业微信扫码登录（钉钉登陆、短信登陆、微信登陆等）Vue框架
目录 1.开始开发准备 1.1 企业微信扫码登陆接入流程 1.2 开启网页授权登陆 1.3 构造独立窗口登陆二维码 1.4 构造内嵌登陆二维码 @@登陆顺序: 1. 发现文档配置 2. 获取token ...
- Jenkins遇到问题一：jenkins配置权限不对导致无法登陆或者空白页面解决办法
Jenkins遇到问题一:jenkins配置权限不对导致无法登陆或者空白页面解决办法 参考文章: (1)Jenkins遇到问题一:jenkins配置权限不对导致无法登陆或者空白页面解决办法 (2)ht ...
- Laravel5.4重新登陆跳转到登陆前页面的原理和实现
1.应用场景: 用户登陆后一段时间需要重新登录,且登陆后返回之前浏览的页面,而不是系统首页.例如:当用户在/article/2 页面,登陆过期后跳转到登陆页面,登陆后用户还应在/user/2而不是ho ...
最新文章
- （转自Timon's wang blogs）C#实现web信息自动抓取
- mybaits二十四:缓存原理示意图
- 如何卸载干净32位的Office
- 王爽汇编习题 ： 给定段地址为0001H，仅通过变化偏移地址寻址，CPU的寻址范围为 ___ 到 ____。
- SSL/TLS协议运行机制
- linux-shell命令之rm（remove）【删除文件或目录】
- 小心DLL链接静态库时的内存错误
- 伊恩斯普里格斯3D肖像的秘密
- javascript中call apply的区别
- （11）FPGA跨时钟域问题导致数据偶尔异常（学无止境）
- 中国内窥镜仪器固定臂市场趋势报告、技术动态创新及市场预测
- 在kettle中实现数据验证和检查
- 微信小程序点餐页面实现完整版
- 苹果平板爱思助手检验安兔兔
- 分支定界-附Python代码
- 企业微信SDK接口API调用-通过手机号或微信好友添加客户
- 译OpenCms-10.5.3—— 1. 背景话题【Background topics】
- 后端知识点链接（二）：操作系统、Linux
- 电压监测器:线性稳压IC 台湾合泰LDO系列
- 小程序商城制作一个需要多少钱？