项目初始化

删除多余页面（tips：helloWorld.vue, /views）

在 App.vue 以及 Router 的配置环境中删除多余代码以及引用

App.vue

Router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({
  routes
})

export default router

路由测试

创建 /components/Login.vue

在 App.vue 中渲染一个和路由匹配的组件

在路由中配置文件中配置路由链接到 Login

import login from '../components/Login.vue'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  }
]

浏览器安装相应插件

为了方便开发， 安装 Vue Devtools 插件， 详细参考：https://devtools.vuejs.org/guide/installation.html

Element 开发文档

https://element.eleme.cn/#/zh-CN/component/installation

登录页面

登录表单

• axios 请求
• 数据绑定
• 表单规则制定, 以及 validate 表单校验
• sessionStorage 的注入

// 登录表单
// :model, v-model 用于数据绑定
// :rules, prop 用于规则制定 

  
    
      
    
  
  
    
      
    
  
  登录


export default {
  data() {
    return {
      // 表单数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      // 表单校验规则
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login(){
      // 对表单进行校验
      // async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$http.post('/login', this.loginForm)
        // console.log(res)
        if (res.data.meta.status !==  200) {
          this.$message({
            showClose: true,
            message: res.data.meta.msg,
            type: 'error'
          });
        }
        else {
          this.$message.success("登录成功")
          // 将用户信息保存在 sessionStoreage, 字符串
          sessionStorage.setItem('userInfo', JSON.stringify(res.data))
          await this.$router.push('/home')
        }
      })
    }
  }
}

路由守卫

// 配置路由守卫
router.beforeEach( (to, from, next) => {
  if (to.path === '/login') {
    return next()
  }
  else {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    console.log(userInfo)
    if (!userInfo) {
      console.log(13213)
      return next('/login')
    }
    next()
  }
})

less 的使用

• Less 是一个 CSS 预处理器。编译后，它会生成简单的CSS，适用于浏览器
• Less 使用嵌套，使得代码更短、更干净，并以特定的方式组织
• WebStorm自动编译

具体代码

Home.vue

login.vue

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from "axios";
// 导入全局样式表文件
import('./assets/css/global.css')
import('./assets/fonts/iconfont.css')

// 配置基本路径
axios.defaults.baseURL = 'http://www.tangxiaoyang.vip:8888/api/v2/'
Vue.prototype.$http = axios
Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from "../components/Home";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

// 配置路由守卫
router.beforeEach( (to, from, next) => {
  if (to.path === '/login') {
    return next()
  }
  else {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    console.log(userInfo)
    if (!userInfo) {
      console.log(13213)
      return next('/login')
    }
    next()
  }
})
export default router