vuecli3学习的第2天(window系统)
发布日期:2021-05-08 09:49:07 浏览次数:0 分类:技术文章

本博客根据腾讯课堂吴老师《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>

页面样式
在这里插入图片描述

上一篇:vuecli3学习的第3天(window系统)
下一篇:vuecli3学习的第1天(window系统)