Element简单登录跳转

最新推荐文章于 2024-07-15 09:44:28 发布

来干了这碗代码

最新推荐文章于 2024-07-15 09:44:28 发布

阅读量712

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/nsnydnz/article/details/120959032

版权

本文介绍了如何使用Vue.js和Element UI构建一个简单的登录界面，并实现登录后的页面跳转。参考了官方文档及 Vue Router 实战教程，详细讲解了main.js、App.vue、Login.vue和Hello.vue等关键文件的配置和代码实现。

摘要由CSDN通过智能技术生成

Vue+Element简单登录界面及跳转

参考资料：

element

http://element.eleme.io/#/zh-CN/component/installation

vuerouter

https://router.vuejs.org/zh-cn/

vue构建单页面应用实战

http://www.jb51.net/article/110796.html

main.js

Js代码

import Vue from 'vue';  
import App from './App';  
import ElementUI from 'element-ui'  
import 'element-ui/lib/theme-default/index.css'  
import VueRouter from 'vue-router'  
  
Vue.use(VueRouter);  
Vue.config.productionTip = false;  
Vue.use(ElementUI);  
/* eslint-disable no-new */  
import Hello from './components/Hello.vue';  
import Login from './components/Login.vue';  
const router = new VueRouter({
     
  mode: 'history',  
  routes: [  
    {
     
      path: '/index',  
      component: Hello  
    },{
     
      path: '',  
      component: Login  
    }  
  ]  
});  
  
new Vue({
     
  el