vuecli3学习的第2天（window系统）

本博客根据腾讯课堂吴老师《VueCli3实战项目-还原饿了么订餐app(短信验证码登录和高德定位)》编写。讲课很好，如果有想学习欢迎加入。

在router.js中创建一个路由守卫
路由守卫的作用，若你没登录则你访问的其他页面默认跳转回登录页面。感觉工作中应该可以用到。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router =  new Router({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
    
    
      path: '/',
      name: 'index',
      component: () => import('./views/index.vue')
    },{
    
    
      path: '/login',
      name: 'login',
      component: () => import('./views/Login.vue') 
    }
  ]
})

//路由守卫
router.beforeEach((to,from,next) => {
    
    
  const isLogin = localStorage.ele_login ? true :false;
  if(to.path == '/login'){
    
    
    next();
  }else{
    
    
    //是否在登录状态下
    isLogin ? next() : next('/login');
  }
})

export default router;

一个登录用的组件

<template>
  <div class="text_group">
    <!-- 组件结构    -->
    <!-- 组件容器 -->
    <div  class="input_group"  :class="{'is-invalid':error}">
      <!-- 输入框 -->
      <input
        :type="type"
        :value="value"
        :placeholder="placeholder"
        :name="name"
        @input="$emit('input'),$event.target.value"
      />
      <!-- 输入框后边的按钮 -->
      <button v-if="btnTitle" :disabled="disable" @click="$emit('btnClick')">{
    
    {
    
    btnTitle}}</button>
      <!-- 错误提醒 -->
      <div v-if="error" class="invalid-feedback">{
    
    {
    
    error}}</div>
    </div>
  </div>
</template>
<script>
export default {
    
    
  name: "inputGroup",
  props: {
    
    
    type: {
    
    
      type: String,
      default: "text"
    },
    value: String,
    placeholder: String,
    name: String,
    btnTitle: String,
    disable: Boolean,
    error: String
  }
};
</script>

登录页面

<template>
    <div class="login">
       <div class="logo">
            <img src="../assets/logo.jpg" alt="my login image">
        </div> 
        <!-- 手机号 -->
        <InputGroup type='number' v-model='phone' placeholder='手机号' :btnTitle='btnTitile' :disabled="disabled" :error='errors.phone'/>
        <!-- 验证码 -->
        <InputGroup type='number' v-model='verifyCode' placeholder='验证码'  :error='errors.code'/>
        <!-- 用户协议 -->
        <div class="login_des">
             <p>
                新用户登录即自动注册，表示已同意
                <span>《用户服务协议》</span>
            </p>
        </div>
        <!-- 登录按钮 -->
        <div class="login_btn">
        <button>登录</button>
        </div>
    </div>
</template>
<script>
import InputGroup from '../components/inputGroup';
export default {
    
    
    name:'login',
    data(){
    
    
        return{
    
    
           phone:'',
           verifyCode:'',
           errors:{
    
    },
           btnTitile:'获取验证码',
           disabled:false,   
        }
    },
    components: {
    
    
        InputGroup
    }
}
</script>

页面样式