Vue中大型项目的总结（纯原创）

置顶 已于 2023-10-11 10:24:23 修改
阅读量8.5k 收藏 65
点赞数 30
分类专栏： js vue 文章标签： vue web webpack 后台管理 经验分享
于 2021-06-09 16:22:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41560520/article/details/117741877
版权
js 同时被 2 个专栏收录
16 篇文章 3 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

创作不易，喜欢就收藏吧！

Vue中大型项目的总结（纯原创）

技术栈：

  1. 基于 @vue/cli 搭建基础模板（大家都比较了解，节省开发时间，远胜于从零开始搭建）。
  2. 开发一些中大型的系统，vue-router 和 vuex 都是必不可少的。
  3. 快速开发UI组件库 Element UI 或Ant Design Vue（相对美观一点）。
  4. 工具库选择 lodash。
  5. 根据业务需求自己定义封装各种开发中可能用到的功能,
    如:
    组件库
    状态管理
    过滤器
    指令、
    CSS内置变量、
    表单验证、
    工具函数

样式：

CSS 预处理器的选择:

  1. Sass/Scss
  2. Less
  3. Stylus

公司更倾向于使用 scss 开发，less 是为了覆盖 ant design vue 的样式，stylus 比较少人用。

局部样式与全局样式:

局部样式:
一般都是使用 scoped 方案：

<style lang="scss" scoped>
@import "base.css";
  ...
</style>

全局样式:
variable.scss: 全局变量管理
mixins.scss: 全局 Mixins 管理
global.scss: 全局样式

其中 variable.scss 和 mixins.scss 会优先于 global.css 加载，并且可以不通过 import 的方式在项目中任何位置使用这些变量和 mixins。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
        @import '@/styles/variable.scss';
        @import '@/styles/mixins.scss';
        `,
      },
    },
  },
}

异步请求：

封装 Axios:

在 @/libs/request.js 路径下对 Axios 进行封装，封装了请求参数，请求头，以及错误提示信息、 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。

import axios from 'axios';
import get from 'lodash/get';
import storage from 'store';
// 创建 axios 实例
const request = axios.create({
 // API 请求的默认前缀
 baseURL: process.env.VUE_APP_BASE_URL,
 timeout: 10000, // 请求超时时间
});
// 异常拦截处理器
const errorHandler = (error) => {
 const status = error.response?.status//缩写，表示如果error.response存在就拿error.response.status
 switch (status) {
   case 400: error.message = '请求错误'; break;
   case 401: error.message = '未授权，请登录'; break;
   case 403: error.message = '拒绝访问(登录过期，请重新登录)'; break;
   case 404: error.message = `请求地址出错,未找到资源: ${error.response.config.url}`; break;
   case 405: error.message = '请求方法未允许'; break;
   case 408: error.message = '请求超时'; break;
   case 500: error.message = '服务器内部错误'; break;
   case 501: error.message = '服务未实现'; break;
   case 502: error.message = '网关错误'; break;
   case 503: error.message = '服务不可用'; break;
   case 504: error.message = '网关超时'; break;
   case 505: error.message = 'HTTP版本不受支持'; break;
   default: break;
 }
 return Promise.reject(error);
};
// 声明一个 Map 用于存储每个请求的标识 和 取消函数
const pending = new Map()
/**
 * 添加请求
 * @param {Object} config 
 */
const addPending = (config) => {
    const url = [
        config.method,
        config.url,
        JSON.stringify(config.params),
        JSON.stringify(config.data)
    ].join('&')
    config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
        if (!pending.has(url)) { // 如果 pending 中不存在当前请求，则添加进去
            pending.set(url, cancel)
        }
    })
}
/**
 * 移除请求
 * @param {Object} config 
 */
const removePending = (config) => {
    const url = [
        config.method,
        config.url,
        JSON.stringify(config.params),
        JSON.stringify(config.data)
    ].join('&')
    console.log('url=', url)
    if (pending.has(url)) { // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
        const cancel = pending.get(url)
        cancel(url)
        pending.delete(url)
    }
}
/**
 * 清空 pending 中的请求（在路由跳转时调用）
 */
export const clearPending = () => {
    for (const [url, cancel] of pending) {
        cancel(url)
    }
    pending.clear()
}
/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */
request.interceptors.request.use((config) => {
		removePending(config) // 在请求开始前，对之前的请求做检查取消操作
    	addPending(config) // 将当前请求添加到 pending 中
        //Vue.ls本地储存的工具包
        const token = Vue.ls.get('ACCESS_TOKEN')
        if (token) {
            config.headers['Authorization'] = 'Bearer ' + token // 
        }
        return config;
}, errorHandler);

// 响应拦截器
request.interceptors.response.use((response) => {
 removePending(response.config) // 在请求结束后，移除本次请求
 const dataAxios = response.data;
 // 这个状态码是和后端约定的
 const { code } = dataAxios;
 // 根据 code 进行判断
 if (code === undefined) {
   // 如果没有 code 代表这不是项目后端开发的接口
   return dataAxios;
 } else {
   // 有 code 代表这是一个后端接口 可以进行进一步的判断
   switch (code) {
     case 200:
       // code === 200 代表没有错误
       return dataAxios.data;
     case 'xxx':
       // [ 示例 ] 其它和后台约定的 code
       return 'xxx';
     default:
       return '不是正确的code';
   }
 }
}, errorHandler);
export default request;

应用实例：

export const getBanner = () => {
    return instance({
        method: 'get',
        url: 'public/v1/home/swiperdata',
        params: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    });
}

将clearPending()方法添加到vue路由钩子函数中

router.beforeEach(async (to, from, next) => {
    clearPending()
    next();
});

跨域问题:

跨域问题一般情况直接找后端解决了，你要是不好意思打扰他们的话，可以用 devServer 提供的 proxy 代理：

不过proxy只能在开发环境使用，线上还得后端处理设置cors(如：Nodejs：res.header(“Access-Control-Allow-Origin”,"*"了解更多，点击这里)，允许我们访问。

// vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://47.100.186.132/your-path/api',
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

Mock 数据：

一个很常见的情况，后端接口没出来，前端在这干瞪眼。

Mock 数据功能是基于 mock.js (opens new window)开发，通过 webpack 进行自动加载 mock 配置文件。

规则：
  • 所有的 mock 配置文件均应放置在 @/mock/services 路径内。
  • 在 @/mock/services 内部可以建立业务相关的文件夹分类存放配置文件。
  • 所有的配置文件应按照 ***.mock.js 的命名规范创建。
  • 配置文件使用 ES6 Module 导出 export default 或 export 一个数组。

入口文件:

import Mock from 'mockjs';
Mock.setup({
  timeout: '500-800',
});
const context = require.context('./services', true, /.mock.js$/);
context.keys().forEach((key) => {
  Object.keys(context(key)).forEach((paramKey) => {
    Mock.mock(...context(key)[paramKey]);
  });
});

示例：

import Mock from 'mockjs';
const { Random } = Mock;
export default [
  RegExp('/example.*'),
  'get',
  {
    'range|50-100': 50,
    'data|10': [
      {
        // 唯一 ID
        id: '@guid()',
        // 生成一个中文名字
        cname: '@cname()',
        // 生成一个 url
        url: '@url()',
        // 生成一个地址
        county: Mock.mock('@county(true)'),
        // 从数组中随机选择一个值
        'array|1': ['A', 'B', 'C', 'D', 'E'],
        // 随机生成一个时间
        time: '@datetime()',
        // 生成一张图片
        image: Random.dataImage('200x100', 'Mock Image'),
      },
    ],
  },
];

路由：

布局三大类：

  • frameIn：基于 BasicLayout，通常需要登录或权限认证的路由。
  • frameOut：不需要动态判断权限的路由，如登录页或通用页面。
  • errorPage：例如404页面。

动态路由原理:

路由需要分成两类，静态路由和动态路由。静态路由是任何菜单权限下都能查看的界面路由；动态路由是根据菜单权限动态生成的路由集合。

大体步骤：拦截路由->后台取到路由->保存路由到localStorage或vuex(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

核心：beforeEach、addRoutes、localStorage

import axios from 'axios'

var getRouter //用来获取后台拿到的路由

router.beforeEach((to, from, next) => {
  if (!getRouter) {//不加这个判断，路由会陷入死循环
    if (!getObjArr('router')) {
      axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {
        getRouter = res.data.data.router//后台拿到路由
        saveObjArr('router', getRouter) //存储路由到localStorage

        routerGo(to, next)//执行路由跳转方法
      })
    } else {//从localStorage拿到了路由
      getRouter = getObjArr('router')//拿到路由
      routerGo(to, next)
    }
  } else {
    next()
  }

})


function routerGo(to, next) {
  getRouter = filterAsyncRouter(getRouter) //过滤路由
  router.addRoutes(getRouter) //动态添加路由
  global.antRouter = getRouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作
  next({ ...to, replace: true })
}

function saveObjArr(name, data) { //localStorage 存储数组对象的方法
  localStorage.setItem(name, JSON.stringify(data))
}

function getObjArr(name) { //localStorage 获取数组对象的方法
  return JSON.parse(window.localStorage.getItem(name));

}

或者vue3.0

import { createRouter, createWebHashHistory } from "vue-router";
import {clearPending} from '../axios'

// 静态路由
const initRouter = [
    {
        path: "/",
        name: "login",
        component: () => import("@/views/login.vue"),
    },
    {
        path: "/home",
        name: "home",
        component: () => import("@/views/home.vue"),
    },
];
// 动态路由
const asyncRouter = [
    {
        path: "/a",
        name: "a",
    },
    {
        path: "/b",
        name: "b",
    },
];
const asyncRouterList = function () {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(asyncRouter)
        }, 300)
    })
}
const router = createRouter({
    history: createWebHashHistory(),
    routes: initRouter,
});

router.beforeEach(async (to, from, next) => {
    //路由跳转前，清空请求
    clearPending()
    // 请求后台路由
    const a = await asyncRouterList()
    //添加请求到的路由
    a.forEach(i => {
        router.options.routes.push(i);
        router.addRoute(i.name, i);
    })
    next();
});
export default router;

权限验证:

通过获取当前用户的权限去比对路由表，生成当前用户具的权限可访问的路由表，通过 router.addRoutes 动态挂载到 router 上。

  • 判断页面是否需要登陆状态，需要则跳转到 /user/login
  • 本地存储中不存在 token 则跳转到 /user/login
  • 如果存在 token，用户信息不存在，自动调用 vuex ‘/system/user/getInfo’

在路由中，集成了权限验证的功能，需要为页面增加权限时，在 meta 下添加相应的 key：

1.auth

(类型：Boolean)：当 auth 为 true 时，此页面需要进行登陆权限验证，只针对 frameIn 路由有效。

2.permissions

(类型：Object)：permissions 每一个 key 对应权限功能的验证，当 key 的值为 true 时，代表具有权限，若 key 为 false，配合 v-permission 指令，可以隐藏相应的 DOM。

import router from '@/router';
import store from '@/store';
import Vuefrom 'Vue';
import util from '@/libs/utils';
// 进度条
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
const loginRoutePath = '/user/login';
const defaultRoutePath = '/home';
/**
 * 路由拦截
 * 权限验证
 */
router.beforeEach(async (to, from, next) => {
  // 进度条
  NProgress.start();
  // 验证当前路由所有的匹配中是否需要有登录验证的
  if (to.matched.some((r) => r.meta.auth)) {
    // 是否存有token作为验证是否登录的条件
    const token = Vue.ls.get('ACCESS_TOKEN');
    if (token && token !== 'undefined') {
      // 是否处于登录页面
      if (to.path === loginRoutePath) {
        next({ path: defaultRoutePath });
        // 查询是否储存用户信息
      } else if (Object.keys(store.state.system.user.info).length === 0) {
        store.dispatch('system/user/getInfo').then(() => {
          next();
        });
      } else {
        next();
      }
    } else {
      // 没有登录的时候跳转到登录界面
      // 携带上登陆成功之后需要跳转的页面完整路径，方便登录后直接回到该页面
      next({
        name: 'Login',
        query: {
          redirect: to.fullPath,
        },
      });
      NProgress.done();
    }
  } else {
    // 不需要身份校验 直接通过
    next();
  }
});
router.afterEach((to) => {
  // 进度条
  NProgress.done();
  util.title(to.meta.title);
});

Vuex:

内置一些功能，主要是对以下这些功能做了一些封装：

  • 用户信息管理（储存信息、对 token 进行操作等）
  • 登陆（调接口）
  • 菜单管理（储存路由信息，生成菜单，模糊查询等功能）
  • 日志管理（消息提醒、日志留存、日志上报）
  • 全屏操作

组件库:

可手动封装复用组件

  • 数字动画
  • 大文件上传（切片、断点续传、秒传）需要与后端配合
  • 图片预览
  • Excel 导入导出
  • 富文本编辑器
  • pdf 生成 及预览
  • 国际化 vue-i18n
  • 等等…

过滤器:

过滤器是 Vue 提供的一个很好用的功能，vue3 已去除。

  • 格式化时间
  • 格式化数字金额
  • 格式化文本
  • 区分环境的链接（主要针对本地静态资源服务器和 OSS ）

指令：

  • 组件权限验证
  • 文本复制
  • 图片懒加载
  • 焦点,文本框聚焦
  • 滚动至指定位置
  • 快捷键绑定

项目优化上线：

1.体验优化：

页面顶部加载条：

使用 nprogress 对路由跳转时做一个伪进度条，这样做在网络不好的情况下可以让用户知道页面已经在加载了：

npm install nprogress
npm install @types/nprogress//如果使用ts

import NProgress from 'nprogress';
router.beforeEach(() => {
  NProgress.start();
});
router.afterEach(() => {
  NProgress.done();
});

美化滚动条样式:

Windows 上的滚动条十分丑陋，为了保持一致：

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 1);
}

静态资源加载页面(首次加载白屏)：

首次加载页面时，会产生大量的白屏时间，这时做一个 loading 效果看起来会很友好，其实很简单，直接在 public/index.html 里写一些静态的样式即可。

移动端 100vh 问题：

在移动端使用 100vh 时，发现在 Chrome、Safari 浏览器中，因为浏览器栏和一些导航栏、链接栏导致不一样的呈现：

你以为的 100vh === 视口高度
实际上 100vh === 视口高度 + 浏览器工具栏（地址栏等等）的高度

解决方案:

安装 vh-check npm install vh-check --save

import vhCheck from 'vh-check';
vhCheck('browser-address-bar');

定义一个 CSS Mixin

@mixin vh($height: 100vh) {
  height: $height;
  height: calc(#{$height} - var(--browser-address-bar, 0px));
}

2.构建优化:

完整的vue.config.js

1.包分析工具:webpack-bundle-analyzer

(构建代码之后，到底是什么占用了这么多空间)

2.开启 Gzip(后端配置支持你的 .gz 文件)

const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩
 new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }),

Nginx服务器也要有相应的配置：

server{ 
listen 8087;
 server_name localhost; 
 gzip on; gzip_min_length 1k;
 gzip_comp_level 9; 
 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 
 gzip_vary on; 
 gzip_disable "MSIE [1-6]\.";
  }

3.路由懒加载

{
  path: 'home',
  name: 'Home',
  component: () => import(
    /* webpackChunkName: "home" */ '@/views/home/index.vue'
  ),
},

4.抽取公共包，引入CDN

//vue.config.js
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios'
}
const cdnMap = {
  css: [],
  js: [
      '//unpkg.com/vue@2.6.10/dist/vue.min.js',
      '//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js',
      '//unpkg.com/vuex@3.1.1/dist/vuex.min.js',
      '//unpkg.com/axios@0.19.0/dist/axios.min.js'
  ]
}
module.exports = {
  chainWebpack: config => {
    config.externals(externals)
    config.plugin('html').tap(args => {
      args[0].cdn = cdnMap
      args[0].minify && (args[0].minify.minifyCSS = true) // 压缩html中的css
      return args
    })
  }
}

然后在public/index.html添加

<!-- 使用CDN的CSS文件 -->
<% for (var i in
  htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
  <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
  htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

5.压缩图片使用image-webpack-loader

6.去除console

npm i -D babel-plugin-transform-remove-console

在 babel.config.js 中配置

// NODE_ENV
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

const plugins = [
  //按需引入elementui
  [
    "component",
    {
      libraryName: "element-ui",
      styleLibraryName: "theme-chalk",
    },
  ],
];

// 去除 console.log
if (IS_PROD) {
  plugins.push("transform-remove-console");
}

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset", ["@babel/preset-env", { modules: false }]],
  plugins: plugins,
};

其他一些优化:

1.合理使用keep-alive避免不必要的加载
2.合理使用本地存储一些简单的数据
3.图片懒加载
 npm install vue-lazyload --save-dev

 <img v-lazy="imgsrc">
 <img v-lazy:background-image="imgsrc">
4.使用字体图标代替图片，或使用精灵图(雪碧图),或svg图片

vue3.0+element-plus实现国际化语言，动态路由菜单：demo案例

web前端小龚
关注
  • 30
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 29
    评论
专栏目录
Vue实现动态路由
无所谓^_^博客
03-23 9958
动态添加路由。说着好像很简单，但看了很多教程，也跟着教程写了很多代码，但最后都跑不通（很多原因，比如：版本问题，教程没有全部代码，只有核心代码片段等）。😭😭😭所以，我只能狠下心，写下这篇博客，方便自己总结，也为了避免大家踩坑。废话不多说，
Vue的项目总结及流程
02-21
Vue的项目总结及流程
vue 实现动态路由
星星的博客
05-19 5万+
1、什么是动态路由？ 2、动态路由的好处 3、动态路由如何实现 1、什么是动态路由？ 动态路由，动态即不是写死的，是可变的。我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。 总结： 1）路由可变，不是写死的，动态加载 2）存储分两种：存前端，存数据库 2、动态路由的好处 使用动态路由可以跟灵活，无需手工维护，我们可以使用一个页面对路由进行维
Vue-搭建项目手把手教程_vue 教程 搭建项目
最新发布
2401_84435768的博客
06-15 736
1.安装好node 和webpack之后2.在d盘 新建一个文件夹 test3.打开test文件 鼠标右键 git bash Here4.检测本地是否有node 和 webpack 命令看下图：检测本地是否装有node：node -v检测本地是否有npm：npm -v5.安装淘宝镜像源： npm install -g cnpm --registry=http://registry.npm.taobao.org。
使用Vue2实现后台管理系统动态路由和动态侧边菜单栏
weixin_62950011的博客
12-31 5829
后台管理菜单项模拟接口动态路由，动态路由，动态即不是写死的，是可变的。我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端而是通过接口获得的，这时候我们要如何根据后台接口编写我们的路由呢。
vue-element-admin动态路由菜单(从后台数据库中获取,)附根据角色权限动态生成路由思路
weixin_44153063的博客
04-11 5631
本项目采用的模板为vue-element-admin i18n分支 在网上看了很多教程，发现都写的很复杂(本人比较菜) , 用尽千辛万苦终于实现了这个功能 首先修改src/store/modules目录下的permission.js文件 为了区分，下面先附上原文件代码 import { asyncRoutes, constantRoutes } from '@/router' /** * Use meta.role to determine if the current user has permi
若依框架------后台路由数据是如何转换为前端路由信息的
02-09 1027
后台路由数据是如何转换为前端路由信息的
Vue全家桶实践项目总结(推荐)
08-28
Vue 全家桶实践项目总结 Vue 全家桶是目前最理想的前端 MVVM 框架，具有双向绑定、路由管理和集中式数据管理等功能。本文将介绍 Vue 全家桶的概念、技术选型、适用场景和项目分析。 概念介绍 -------- ### Vue ...
vue项目中api接口管理总结
01-19
默认vue项目中已经使用vue-cli生成，安装axios，基于element-ui开发，axiosconfig目录和api目录是同级，主要记录配置的相关。 1. 在axiosconfig目录下的axiosConfig.js import Vue from 'vue' import axios from '...
vue-router项目实战总结篇
11-28
今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一，router帮我们完成了SPA应用间的页面跳转。 并且，配合axios这样的第三方库，我们可以实现配合后台接口...
el-menu动态加载路由，菜单的解决方案
lc257的博客
11-21 7095
动态从数据库加载路由，菜单
vue实现动态路由菜单！！！
TangMonk的博客
11-28 1591
递归处理后端响应的菜单树，后依次通过addRoute方法往静态父路由，添加动态子路由，添加完使用el-menu渲染并添加router属性实现路由菜单模式。
vue动态生成路由及常见问题
Zichen_Lin的博客
10-16 3362
在一些常见的 RBAC 系统中，对于角色和权限的管理是极其重要的。一个人可以拥有多个`角色`，而一个角色又会被赋予多个`权限`。不同的角色在登录后台系统后，看到的系统菜单也是不同的。在前后端不分离的项目中，后端可以整合 `Spring Security`、`Shiro`等安全框架对页面元素进行标签化管理。但是随着前后分离模式的普及，我们现常常把展示逻辑放到前端来完成。本文就详细聊一聊在 vue 中如何实现对于菜单的动态控制。
vue动态路由操作
m0_73481765的博客
07-02 702
Vue动态路由操作指的是在Vue应用中根据不同的参数，动态生成相应的路由。一般来说，我们可以使用Vue的路由插件vue-router来实现动态路由操作。以上是一个简单的动态路由操作示例，可以通过参数来动态生成路由，并在组件中获取和使用这些参数。
Vue动态路由
weixin_51654689的博客
05-28 1194
在Vue中，动态路由指的是根据参数或其他条件动态生成路由的方式。通常情况下，我们在路由配置文件中定义静态路由，但有时候需要根据特定的需求在运行时生成路由。Vue Router提供了一些机制来实现动态路由的功能。动态生成路由 在某些情况下，我们需要在运行时根据特定的条件动态生成路由。这可以通过使用Vue Router提供的。在组件中使用动态路由 在组件中，可以通过使用。来获取动态路由中的参数。
Vue如何实现动态路由以及动态路由详解
weixin_45357661的博客
01-11 2579
Vue如何实现动态路由以及动态路由详解
Vue 实现动态生成路由（动态生成菜单，根据菜单动态生成路由）
热门推荐
Vincent的博客
07-16 7万+
在后台管理系统中，常常会因为不同的权限，展现不同的菜单。但这仅仅是显示控制，而我们要做的是没有的菜单权限，直接输入URL也不可访问，真正的实现菜单权限控制。 一、动态菜单显示 1. 后端返回的菜单数据处理 后端返回的菜单数据一般有两种，处理好的树状结构、或者未处理的列表数据（这种情况需要我们去转换成树状结构，可看我的另外一篇博客【js树形结构操作】）。 下面是后端返回的数据： [ { "id": "1", "pid": "0", "name": "工作台", "url.
16 个优秀的 Vue 开源项目
jjxp2011的专栏
04-14 2037
最初，该产品是作为编写技术文档的工具而创建的，但现在它是一个小型、紧凑、功能强大的headless CMS。它也是模块化的，所以你可以只使用你的apage所需要的模块简而言之,Nu xt 将您从构建和优化您的apage的工作中拯救出来Nuxt. js 具有模块化的架构,有50多个模块可供选择。这是特别有价值的，因为团队有一个清晰的路线图，所以你作为一个贡献者可以选择你可以做的任务。Vue是结合react和angular的最好的方法，并且拥有一个有凝聚力的，活跃的，能够应对开发问题的大型社区。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web前端小龚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值