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