目錄結(jié)構(gòu)

router.js

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect:'/welcome',children: [{path: '/welcome',component: Welcome}]}] }); //掛載路由導(dǎo)航守衛(wèi) router.beforeEach((to, from, next) => {if (to.path === '/login') return next();//獲取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next(); })export default router

login.vue

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表單區(qū)域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 登錄區(qū)域--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="login">登錄</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div> </div></template><script> export default{data(){return{//這是登錄表單的數(shù)據(jù)loginForm:{username:'geyao',password:'12345678'},// 表單驗(yàn)證loginFormRules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 2, max: 10, message: '長度在 2 到 10 個(gè)字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入用戶密碼', trigger: 'blur' },{ min: 6, max: 18, message: '長度在 6 到 18 個(gè)字符', trigger: 'blur' }]}}},methods:{resetLoginForm(){// console.log(this)this.$refs.loginFormRef.resetFields();},login(){this.$refs.loginFormRef.validate(async valid =>{if(!valid) return;const {data:res}=await this.$http.post('login',this.loginForm);if(res.meta.status!==200) return this.$message.error('登錄失敗');this.$message.success('登錄成功');// 1、將登陸成功之后的token, 保存到客戶端的sessionStorage中; // 1.1 項(xiàng)目中出現(xiàn)了登錄之外的其他API接口，必須在登陸之后才能訪問// 1.2 token 只應(yīng)在當(dāng)前網(wǎng)站打開期間生效，所以將token保存在window.sessionStorage.setItem('token', res.data.token)// 2、通過編程式導(dǎo)航跳轉(zhuǎn)到后臺(tái)主頁, 路由地址為：/homethis.$router.push('/home')});}} } </script><style lang="less" scoped> .login_container {background-color: #2b4b6b;height: 100%; } .login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff; }.avatar_box {width: 130px;height: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}.login_form {position: absolute;bottom: 60px;width: 100%;padding: 0 20px;box-sizing: border-box; }.btns {display: flex;justify-content: center; } </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js' //導(dǎo)入字體圖標(biāo) import './assets/fonts/iconfont.css' Vue.config.productionTip = false //導(dǎo)入全局樣式 import './assets/css/global.css'import axios from 'axios' Vue.prototype.$http=axios axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/" // 請求在到達(dá)服務(wù)器之前，先會(huì)調(diào)用use中的這個(gè)回調(diào)函數(shù)來添加請求頭信息 axios.interceptors.request.use(config => {// console.log(config)// 為請求頭對(duì)象，添加token驗(yàn)證的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')// 在最后必須 return configreturn config }) Vue.config.productionTip=false; new Vue({router,render: h => h(App) }).$mount('#app')

global.css

/* 全局樣式 */ html, body, #app {height: 100%;margin: 0;padding: 0;}

element.js

import Vue from 'vue'//彈框提示 import {Message,Button,Form,FormItem,Input,Container,Header,Aside,Main,Menu,Submenu,MenuItemGroup,MenuItem, } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.use(Container) Vue.use(Header) Vue.use(Aside) Vue.use(Main) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItemGroup) Vue.use(MenuItem) Vue.prototype.$message = Message

Home.vue

<template><el-container class="home-container"><el-header>Header<div><img src="../assets/logo.png" alt /><span>電商管理系統(tǒng)</span></div> <el-button type="info" @click="logout">退出</el-button></el-header><el-container><el-aside :width="isCollapse"><div class="toggle-button" @click="togleCollapse">|||</div><el-menu background-color="#333744" text-color="#fff" active-text-color="#409FFF" :unique-opened="true" :collapse="isCollapse" :collapse-transition="false"><!-- :unique-opened="true"->只允許展開一個(gè)菜單 --><!-- :unique-opened="true"->只允許展開一個(gè)菜單 --><!-- :collapse-transition="false" -> 關(guān)閉動(dòng)畫 --><!-- router -> 導(dǎo)航開啟路由模式 --><!-- 一級(jí)菜單 --><el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id"><!-- 一級(jí)菜單的模板區(qū)域 --><template slot="title"><i :class="iconObj[item.id]"></i><span>{{item.authName}}</span></template><!-- 二級(jí)菜單 --><el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id"><template slot="title"><i class="el-icon-menu"></i><span>{{subItem.authName}}</span></template></el-menu-item></el-submenu></el-menu></el-aside><el-main><router-view></router-view></el-main> </el-container> </el-container> </template><script> export default{data(){return{menulist:[],iconObj: {'125': 'iconfont icon-user','103': 'iconfont icon-tijikongjian','101': 'iconfont icon-shangpin','102': 'iconfont icon-danju','145': 'iconfont icon-baobiao'},isCollapse:false}},//獲取所有菜單created () {this.getMenuList()// this.activePath = window.sessionStorage.getItem('activePath')},methods:{logout(){window.sessionStorage.clear();this.$router.push("/login");},// 獲取請求菜單async getMenuList () {const { data: res } = await this.$http.get('menus')if (res.meta.status !== 200) return this.$message.error(res.meta.msg)this.menulist = res.dataconsole.log(res)},// 菜單的折疊與展開togleCollapse () {this.isCollapse = !this.isCollapse},} }; </script><style lang="less" scoped> .home-container{height: 100%; } .el-header {background-color: #373f41;display: flex;justify-content: space-between;padding-left: 0;align-items: center;color: #fff;font-size: 20px;> div {display: flex;align-items: center;img {height: 40px;}span {margin-left: 15px;}} } .el-aside {background-color: #333744;.el-menu{border-right: none;}} .el-main {background-color: #eaedf1; } .iconfont{margin-right: 10px; } .toggle-button {background-color: #4A5064;font-size: 10px;line-height: 24px;color: #fff;text-align: center;letter-spacing: 0.2em;// 鼠標(biāo)放上去變成小手cursor: pointer; } </style>

.prettierrc

{"semi":false,"singleQuote":true }

eslintrc.js

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/essential','@vue/standard'],parserOptions: {parser: 'babel-eslint'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren':0} }

welcome.vue

<template><div><h3>歡迎</h3></div> </template>

?

運(yùn)行結(jié)果

?

總結(jié)

以上是生活随笔為你收集整理的前端学习（1885）vue之电商管理系统电商系统之首页路由的重定向的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。