本篇文章给大家带来的内容是关于vue路由history模式刷新页面时出现404问题的两种解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。vue hash模式下，URL中存在#，用history模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。在nginx的配置文件中修改方法一：location /{root /data/nginx/html;index index.html index.htm;if (!-e $request_filename...
本篇文章给大家带来的内容是关于vue中实现后台管理系统权限控制的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、前言在广告机项目中，角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分，其中根据粒的大小分的更细：接口访问的权限控制页面的权限控制菜单中的页面是否能被访问页面中的按钮（增、删、改）的权限控制是否显示下面我们就看一看是如何实现这些个权限控制的。二、接...
地图在项目中用得很多，最近也用了几次，好长时间不用都记不清了，闲暇时整理了vue里使用百度地图的2种方法，方便自己查看，也分享给大家，希望可以帮助有需要的人。普遍的方法是： 1.index.html 中引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>2.新建个组件maps注意 ：不要把组件命名为map，因为html中有map标签，会报错报错：Do not use built-in or reserved HTML eleme...
本篇文章给大家带来的内容是关于vue循环列表动态数据的处理方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title> </head> <body> <div id="app"><p v-for="(item,index)in list" :key="i...
本篇文章给大家带来的内容是关于vue $refs中不使用拼接的原因以及解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最好不要在ref中用拼接<li class="audio-item media" v-if="item.type == 3" @click="handleClearInterval(item.id)"><xm-audio :audioSrc="item.content" :size="item.size" :ref="audio+index"></xm-audio> </li>handleClearInterval(id) {_.each(this.$refs,(item,key)=>{if(key != au...
本篇文章给大家带来的内容是关于vue-awesome-swiper轮播插件的使用方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件1.npm安装npm i vue-awesome-swiper -S我这里安装的是下面的这个版本2.使用全局导入：import Vue from vue import vueSwiper from vue-awesome-swiper /* 样式的话，我...
本篇文章给大家带来的内容是关于vue2.0下IE浏览器的白屏的解决方法（详细过程），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。公司新开发的项目需要兼容到IE9+就在index.html页面加入<meta http-equiv="X-UA-Compatible" content="IE=edge">不起作用总结方法：兼容IE9/IE10可能会遇到语法或者 Promise错误，安装 babel-polyfillnpm install babel-polyfill在页面入口配置main.js中引入 babel-polyfillimport("...
本篇文章给大家带来的内容是关于vue父子组件间如何通信 ？vue父子组件间通信的四种方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。父子通信目前有四种方式：1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}子组件通过props来接收数据:方式1：props...
本篇文章给大家带来的内容是关于vue中弹窗插件的应用方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗popup.vue<template><div class="popup-wrapper" v-show="visible" @click="hide"><div class="popup-text">{{text}}</div></div> </template>组件html结构, 外层pposition:fixed定位, 内层p显示弹窗内容export default {name: popup,...
本篇文章给大家带来的内容是关于Vue.js的组件异步加载的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。 此时，我们就需要使用组件异步加载，即进入对应的组件时，只加载核心组件、代码和对应的组件代码。 通过vue-router和webpack实现 需要...
element-ui是基于vue2.0的ui框架是目前最受欢迎的一个框架，本篇文章就来给大家介绍一下vue-cli和element-ui快速搭建项目的方法。一、前言vue2.0的到来，凭借这其简单易学、完善的API中文文档、丰富的生态系统，成为国内目前十分受欢迎的前端MVVM框架， element-ui是基于 vue2.0的 ui框架，由饿了么团队开发维护的，目前是vue的ui库中最受欢迎的一个框架二、代码操作使用vue-cli + element-ui有两种方式方案一： ①先使用vue-cli 搭...
本篇文章给大家带来的内容是关于 icon字体在vue中的使用方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。因为项目是vue搭建的 用unicode 字符不方便，就只能设定class。一开始以为是版本问题，但是也没有结果。找了下样式里面的字体路径也是没问题的。最后尝试着加了一段css，发现就没问题了。这个是layui.css里面没有的，不知道layui的大佬们要不要考虑加进去。[class^="layui-icon-"], [class*="layui-ico...
本篇文章给大家带来的内容是关于vue.js路由显示设置的方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。①设置 path 为 ‘/’const router= new VueRouter({routes:[{path:/,name:home,component:Home}, //页面第一显示的组件{path:/menu,name:menu,component:Menu},{path:*,redirect:/}],mode:"history" });②设置 redirect 的值（适用于 二级路由）const router= new VueRouter({routes:...
本篇文章给大家带来的内容是关于vue.js中路由器的配置方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在 vue 项目中装 路由模块npm install vue-router --save-dev在配置路由之前，先来了解下 <router-link> 和 <router-view> 标签<router-link> 和 <a> 标签是一样的作用用于跳转<router-link to="/body">点我跳转页面</router-link>to 里面是地址，先不管他，因为 "/body" 是在配置路由时定义好的...
本篇文章给大家带来的内容是关于Vue.js路由器的使用方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<router-link> 是用于 路由器的无刷新跳转改变<router-link> 标签默认显示标签<router-link> 标签默认显示 Dom 为 <a><router-link to="/" class="nav-link">主页</router-link>通过 tag 属性可以改变 如：<router-link to="/" tag="p" class="nav-link">主页</router-link><router-link>动态...