农业项目-vue2

最新推荐文章于 2023-04-03 11:50:10 发布

牛马小龙

最新推荐文章于 2023-04-03 11:50:10 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_65769258/article/details/123442017

版权

本文档介绍了在一个Vue2农业项目中，如何搭建项目并实现登录与退出功能。首先，通过vue-cli创建项目并禁用Eslint，接着配置路由、引入有赞UI库和axios。重点在于登录逻辑，管理员登录后根据角色字段动态添加路由，并使用Vuex管理状态。在Layout组件中，从Vuex获取并渲染路由，点击退出时清空数据。最后，阐述了登录成功后的正确跳转逻辑，确保用户体验合理。

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

1.项目的起始（搭建项目）

1.页面登录和退出功能已完善，大致思路是，1.管理员进入，重定向到login页面，登录账号和密码，点击登录发送请求，返回的数据，

2.将username，type（角色字段），token（通行令牌），还要一个是routes数据，因为不同的管理员看到的页面是不同的，超级管理员可以设置管理员。通过type的值判断它是什么管理员，然后利用this.$router.addRoutes(在括号内这个是对应管理员的路由配置的名字)。

3.在layout页面从vuex库里拿取数据，渲染页面，但点击退出登录的时候，将数据清空。

要求：

1.搭建一个基本的vue2，安装脚手架，创建项目，禁用Eslint，配置路由，添加有赞ui库，下载scss，axios拦截器，vuex的安装

2.搭建路由，由于项目的需求，我们需要每个页面都配置一个父组件layout，需要将组件导入router下的index文件中，那么路由的配置为：

import Layout from '@/views/layout/layout';

//无需登录的路由
const initRoutes = [{
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('../views/login/login.vue')
    }, {
        path: '/about',
        name: 'about',
        component: () => import('../views/about/about.vue')
    }
];

//普通管理员的路由
export const adminRoutes = [{
        path: '/home'