vue2+若依框架plus交互路由介绍

最新推荐文章于 2025-04-30 10:19:58 发布

小王没脑袋

最新推荐文章于 2025-04-30 10:19:58 发布

阅读量2.8k

点赞数 38

分类专栏： vue 文章标签： vue.js 前端 ruoyi

本文链接：https://blog.csdn.net/wzy0507/article/details/136423145

版权

本周及寒假

参加了校企合作的工程过程管理，和学长学姐一起写项目，之前学了vue也没有应用，然后对框架很多组件的用法不太了解，前期耽误了一些时间。

框架模块

首先是框架模块的介绍 api存了一些系统管理及发送请求的方法
在这里插入图片描述
例如project.js

import request from '@/utils/request'
import {
    getToken } from '@/utils/auth'
//添加新的公司
let token = getToken();
export function getTypeOnline(compName, compType) {
   
    return request({
   
        url: `/project/queryCompany?name=${
     compName}&type=${
     compType}`,
        headers: {
   
            isToken: true,
            token: `Bearer ${
     token}`
        },
        method: 'post',
     
    })
}

然后是asset文件夹存了文件的静态资源
在这里插入图片描述
component存的是用到的组件 layout也是组件可以将页面的组件拆分展示成多个
plugins仿制的是插件进行鉴权等等，router是路由配置文件 store放置的是拆分出来的vuex里面的分模块化的内容

在这里插入图片描述

路由配置

菜单配置路由

若依框架可以通过菜单进行路由配置进入系统管理的菜单管理
在这里插入图片描述
通过改变菜单的目录和菜单进行配置输入组件路径和路由地址既可以在左边侧边栏渲染出导航栏

路由配置

这是我配置的路由因为本来在菜单设置的三级路由一直报错这个配置的路由可以通过
meta: { title: ‘首页’}渲染你面包屑

 {
   
    path: '',
    component: Layout,
    redirect: 'homePage',
    meta: {
    title: '首页', icon: 'dashboard', affix: true },
    children: [
      {
   
        path: 'homePage',
        component: () => import('@/views/home/homePage'),
        name: 'homePage',
        meta: {
    title: '公司库', icon: 'dashboard', affix: true },
        children:[
        ]
      },
        {
   
            path: 'project',
            component: () => import('@/views/home/projectManeger'),
            name: 'Project',
            meta: {
    title: '工程管理', icon: 'dashboard', affix: true },
            children: [{
   
              path: 'projectMain/:param',
              props: true,
              component: () => import('@/views/home/projectMain'),
              name: 'projectMain',
              hidden: true,
              meta: {
    title: '工程详情', icon: 'dashboard', affix: true, }
            }
            ],
          },
    ]
  },

登录逻辑

若依的登录逻辑是写好了的在login.vue我们可以看到如下代码

 handleLogin() {
   
      this.$refs.loginForm.validate(valid => {
   
        if (valid) {
   
          this.loading = true;
          if (this.loginForm.rememberMe) {
   
            Cookies.set("username", this.loginForm.username, {
    expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
    expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, {
    expires: 30 });
          } else {
   
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe')