设置首页

编辑client/src/views/Home.vue：

<template><div class="home"><div class="container"><h1 class="title">MamaHuhu资金管理系统</h1><p class="lead">千里之堤，溃于蚁穴。细节决定成败！</p></div></div>
</template><style scoped>.home {width: 100%;height: 100%;background: url(../assets/showcase.png) no-repeat;background-size: 100% 100%;}.container {width: 100%;height: 100%;box-sizing: border-box;padding-top: 100px;background-color: rgba(0, 0, 0, 0.7);text-align: center;color: white;}.title {font-size: 30px;}.lead {margin-top: 50px;font-size: 22px;}
</style>

编辑client/src/views/Index.vue，添加router-view以显示Home组件：

<template><div class="index"><HeadNav></HeadNav><router-view></router-view></div>
</template><script>import HeadNav from "../components/HeadNav"export default {name: 'index',components: {HeadNav}};
</script><style>.index {width: 100%;height: 100%;overflow: hidden;}</style>

编辑client/src/router/index.js，为Home配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import Register from '../views/Register.vue'
import Login from '../views/Login.vue'
import NotFound from '../views/404.vue'
import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{path: '/',redirect: 'index'},{path: '/index',name: 'index',component: Index,children: [{ path: '', component: Home },{ path: '/home', name: 'home', component: Home }]},{path: '/register',name: 'register',component: Register},{path: '/login',name: 'login',component: Login},{path: '*',name: '/404',component: NotFound}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})router.beforeEach((to, from, next) => {const isLogin = localStorage.eleToken ? true : false;if (to.path == '/login' || to.path == '/register') {next();} else {isLogin ? next() : next('/login');}
});export default router

设置个人信息页

编辑client/src/router/index.js，为个人信息页面配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import Register from '../views/Register.vue'
import Login from '../views/Login.vue'
import NotFound from '../views/404.vue'
import Home from '../views/Home.vue'
import InfoShow from '../views/InfoShow'Vue.use(VueRouter)const routes = [{path: '/',redirect: 'index'},{path: '/index',name: 'index',component: Index,children: [{ path: '', component: Home },{ path: '/home', name: 'home', component: Home },{ path: '/infoshow', name: 'infoshow', component: InfoShow }]},{path: '/register',name: 'register',component: Register},{path: '/login',name: 'login',component: Login},{path: '*',name: '/404',component: NotFound}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})router.beforeEach((to, from, next) => {const isLogin = localStorage.eleToken ? true : false;if (to.path == '/login' || to.path == '/register') {next();} else {isLogin ? next() : next('/login');}
});export default router

创建个人信息展示页面InfoShow.vue：

<template><div class="infoshow"><el-row type="flex" class="row-bg" justify="center"><el-col :span="8"><div class="user"><img :src="user.avatar" class="avatar" alt="" /></div></el-col><el-col :span="16"><div class="userinfo"><div class="user-item"><i class="fa fa-user"></i><span>{{user.name}}</span></div><div class="user-item"><i class="fa fa-cog"></i><span>{{user.identity == "manager" ? "经理":"员工"}}</span></div></div></el-col></el-row></div>
</template><script>export default {name: 'infoshow',computed: {user() {return this.$store.getters.user;}}}</script><style scoped>.infoshow {width: 100%;height: 100%;box-sizing: border-box;/* padding: 16px; */}.row-bg {width: 100%;height: 100%;}.user {text-align: center;position: relative;top: 30%;}.user img {width: 150px;border-radius: 50%;}.user span {display: block;text-align: center;margin-top: 20px;font-size: 20px;font-weight: bold;}.userinfo {height: 100%;background-color: #eee;}.user-item {position: relative;top: 30%;padding: 26px;font-size: 28px;color: #333;}
</style>

在client/public/index.html中引入font-awesome.css：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"><link rel="stylesheet" href="css/reset.css"><title><%= htmlWebpackPlugin.options.title %></title>
</head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

编辑client/src/components/HeadNav.vue，修改下拉菜单的showInfoList方法：

methods: {setDialogInfo(cmdItem) {//console.log(cmdItem);switch (cmdItem) {case "info":this.showInfoList();break;case "logout":this.logout();break;}},showInfoList() {this.$router.push('/infoshow');},logout() {//清除tokenlocalStorage.removeItem('eleToken');//设置Vuex storethis.$store.dispatch('clearCurrentState');//跳转到登录页面this.$router.push('/login');}}

vue2设置首页和个人信息页相关推荐

SpringBoot设置首页(默认页)跳转
SpringBoot设置首页(默认页)跳转方案1:controller里添加一个"/"的映射路径 @RequestMapping("/") public St ...
java设置首页跳转_SpringBoot设置首页(默认页)跳转功能的实现方案
先给大家介绍下SpringBoot设置首页(默认页)跳转功能最近springboot开发需要设置个默认页面,就相当于我访问http://www.back.order.baidu.com要直接跳转到登 ...
【愚公系列】2023年02月 WMS智能仓储系统-013.基础设置（首页、公司信息、角色设置）
文章目录前言一.基础设置 1.首页 2.公司信息 2.1 页面代码 2.2 接口代码 3.角色设置 3.1 页面代码 3.2 接口代码前言基础设置主要分为以下几个模块: 首页公司信息角色设 ...
Chrome浏览器新标签页设置首页主页修改添加网站Infinity插件好用
Infinity new tab 是一款美观实用的chrome 新标签页.最常访问的网站添加,修改,删除网址都有,每日一图,云备份等功能都具备.是一款基于html5的Chrome扩展程序,它重新定义了 ...
怎样在Word2007里设置首页不显示页码，第二页页码从“2”开始显示？
引自:http://zhidao.baidu.com/question/91035930.html 在写毕业论文,没有封面.因此第一页的页码应该是"1".但要求是第一页不显示页码, ...
python批量分析表格_python批量设置多个Excel文件页眉页脚的脚本
python批量设置多个Excel文件页眉页脚的脚本本文实例为大家分享了python批量设置多个Excel文件页眉页脚的具体代码,供大家参考,具体内容如下 import os import open ...
GridView数据库分页+自定义分页导航（二）：自定义分页导航。首页、上一页、下一页、尾页和跳转
完成图: 先进入模板编辑模式,选择[PagerTemplate],添加自己所需的导航控件列入这样的,上一页和下一页和GO使用[LinkButton],也可使用其他的控件,[注:LinkButton ...
网站关键词优化应该先优化首页还是优化内页？
今天在搜外问答里看到一个问题:一个网站应该先优化首页还是内页.因为现如今越来越多的朋友不做seo了,所以对于seo相关的问题已经是五花八门, 郑州seo聊聊这个行业的动态,顺便也聊聊这个朋友的问题. ...
python 操作word页眉表格_python批量设置多个Excel文件页眉页脚的脚本
本文实例为大家分享了python批量设置多个Excel文件页眉页脚的具体代码,供大家参考,具体内容如下 import os import openpyxl from openpyxl.workshee ...

vue2设置首页和个人信息页

vue2设置首页和个人信息页

设置首页

设置个人信息页

vue2设置首页和个人信息页相关推荐

最新文章

热门文章