目錄結構

router.js

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' Vue.use(Router)export default new Router({routes:[{path:'/',redirect:'/login'},{path:'/login',component:Login},{path:'/home',component:Home}] })

login.vue

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表單區域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 登錄區域--><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{//這是登錄表單的數據loginForm:{username:'geyao',password:'12345678'},// 表單驗證loginFormRules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 2, max: 10, message: '長度在 2 到 10 個字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入用戶密碼', trigger: 'blur' },{ min: 6, max: 18, message: '長度在 6 到 18 個字符', 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 項目中出現了登錄之外的其他API接口，必須在登陸之后才能訪問// 1.2 token 只應在當前網站打開期間生效，所以將token保存在window.sessionStorage.setItem('token', res.data.token)// 2、通過編程式導航跳轉到后臺主頁, 路由地址為：/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' //導入字體圖標 import './assets/fonts/iconfont.css' Vue.config.productionTip = false //導入全局樣式 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/" 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 { Button } from 'element-ui' import {Form,FormItem} from 'element-ui' import {Input} from 'element-ui' //彈框提示 import {Message} from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.prototype.$message=Message

Home.vue

<template> <div> Home 組件 </div> </template><script> </script>

運行結果

總結

以上是生活随笔為你收集整理的前端学习（1871）vue之电商管理系统电商系统之路由导航守卫控制页面访问权限的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。