hunt_er的博客

最近在写项目，实现动态菜单及细粒化按钮权限功能，依托于vue-router动态路由的实现，可以实时从后端获取路由权限，并及时更新。动态路由的实现可以看这篇完整文章：vue实现动态路由。问题：在使用addRoutes方法更新路由表的时候，发现从后端带来的权限信息并没有更新掉原有的路由信息。思路：查看vue-router文档，发现addRoutes已经不被推荐使用了，后来使用新的addRoute方法来逐个更新路由，发现并不能解决问题。api也没有提供remove路由的操作。嗯~ 开始面向

项目中使用了el-popover，但是原始白色背景不够美观，想修改一下样式，一直不成功，仔细查看dom发现，popover的dom创建在了最外层，如图显然，它是和根组件app同级的dom，所以在任何<style scoped></style>下写的css均不能生效。如果直接在<style></style>下粗暴修改，势必又会影响到其他组件的样式，显然不能忍受。那么该怎样修改,又不会影响到其他组件的样式呢？先来看一下官方文档怎么说的..

导入的项目npm install后，发现css引用报错，报错内容：Cannot resolve directory '~@'。既然是不能解析目录，猜想不是项目本身的问题，应该是webstorm或者eslint配置问题。鉴于eslint已经配置好，所以应该是webstorm没有配置好，百度了一下，发现网上的文章真是牛头不对马嘴。。。。不过还好，最后让我找到了解决方法！问题：webstorm不能识别项目中导入css文件的目录， @import "~@/assets/css/main"

这是官网的基础语法和教程官方给出的使用只有一行代码，没有过多的解释。而实际使用也确实如此，确实一行代码就可以用了。但是，在使用时往往存在各种各样的问题，笔者在用这个组件时也踩了不少坑，多方测试，发现如下问题（报错问题不在本篇解决范围，按照报错提示解决就好了），汇总如下：注意事项：最常见的问题就是不能显示（没有反应），好像这个组件被隐藏了一样，折腾半天最后连组件长什么样都不知道，，，，这里放一个图，这是组件默认的样子，我放在了dialog里。代码如下：<el

在学习vue时，了解vue实例的生命周期是非常必要的，这有助于我们解决许多问题，下图对vue的生命周期进行了比较的详细解释。

在写项目时遇到一个需求，需要添加一个展开列的功能，用以显示多余的行属性。由于之前已经封装过element的table组件，所以这次就想着直接在封装过的组件上添加该功能。先看一看element官方对于展开列的描述。那就开始做吧，myTable组件中这样写。...

因业务需要，要求一个数字框，现有的element的input不太符合要求，遂动手封装了一个，封装后仍能调用原<el-input>事件。功能：仅能输入合法整数和小数格式，默认最少保留二位小数，最大保留四位小数，支持负数格式，支持禁用使用：<my-input-number :value.sync="value"/>采用了vue的.sync修饰符，其余功能属性在代码中有详细注释，上代码。<template> <el-input class="g

方法一：前后端分开部署一、前端部署1、下载 nginx，官方网址如下：http://nginx.org/en/download.html

在做vue项目时，要求使用axios异步下载后端传输的文件流，下载之后的文件打开是乱码。F12一看，浏览器拿到的不是Blob类型的，而是一串字符串乱码。操作如下：1.写axios接口import axios from 'axios'export const uploadFileRequest = (url, body, params) => { let token = getTokens() let queryParams = { 'access_token': token.ac

最近在写vue项目，需要由后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)，就是配置vue动态路由啦。由于错信了一些网上的文章:(，导致在这个问题上耗费了不少时间，想想，还是自己写一篇文章来记录一下那些遇到的坑吧。接下来手把手记录一下，如何从零开始配置vue动态路由。首先呢，先看看静态路由的配置，简单预览一下，熟悉的可以直接跳过，说这部分，是为了熟悉一下路由的配置。静态路由的回顾1.创建router/index.js文件import Vue from 'v

项目里遇到一个问题，用this.$options.data()重置组件data时报错，原因是因为form里的rule规则采用了this写法。如下:rules: { code: [this.$rules.required()], name: [this.$rules.required()], age: [ {min: 1, max: 120, type: 'number', message: '年龄 1 到 120 之间', tri

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，遂查看vue文档，得知watch有一种深度监听的方法。从vue文档搬运。=》var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { cons

在写项目的时候遇见一个问题，修改vue v-bind或v-model绑定的数据时，视图不能更新这就感觉很无语了。。。。当时在写一个弹窗，弹窗的数据更新后不能更新视图，需要重新刷新才行。这样的问题简直不能忍受。。。。 多方查找，才发现 vue文档里有这样一句话。Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的。这句话..

在写vue项目时想到一个问题，项目里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？我们知道，用传统的html形式引用vue可以通过给最外层的vue实例命名var myapp=new Vue({el:'#app',data:{ a:1}})然后在控制台输入myapp.a=2改变里面data的值,这样在浏览器控制台调试很方便那么现在采用vue-cli构建项目时，里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？方法是在creat