Vue+MySQL实现登录注册案例
1.新建vue项目并连接数据库
具体步骤见vue连接mysql数据库
2.新建登录页面、注册页面和首页
在src/views文件夹下,新建 login.vue(登录页面)、register.vue(注册页面) 和 home.vue(首页)
-
根据自己的喜好搭建页面(本人此处使用了elementUI的组件,cv前要先安装elementUI中间件)
npm i element-ui -S
登录页面
4.页面路由配置
在src/router/index.js中配置页面对应路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const home = () => import("../views/home.vue") //懒加载
const login = () => import("../views/login.vue")
const register = () => import("../views/register.vue")
const routes = [
{
path: '',
redirect: '/login' //重定向
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/register',
name: 'register',
component: register
},
{
path: '/home',
name: 'home',
component: home,
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//解决相同路径跳转报错问题
//使用push的方法
const RouterPush = VueRouter.prototype.push
VueRouter.prototype.push = functio