![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue实际运用
GG·bond
这个作者很懒,什么都没留下…
展开
-
vue内网穿透
解决 Vue 项目 invalid host header 问题disableHostCheck:true报错问题描述使用内网穿透时出现 invalid host header找了好多都是让配置vue.config.js系统报错// vue3 vue.config.jsmodule.exports = {// 跳过检查hostdevServer: { disableHostCheck: true }}按照上述进行配置时出现报错信息在这里插入图片描述原因分析:根据报错提示在web原创 2022-04-24 09:31:58 · 2328 阅读 · 0 评论 -
vue遇到的问题五:修改路由参数,不会刷新该页面
1. vue路由,修改某组件的路由参数,不会刷新该组件需求:在某个组件中,内容由参数发起接口获取,且该组件由上/下翻页效果,需要改变参数,更新内容http://localhost:8080/#/module?type=1&id=15 //需要改变id解决办法:监听路由方法一:watch:{// 路由发生变化页面刷新 '$route' (to, from){ this.$router.go(0); }}//缺点:刷新一次页面,用户体验不好方法二:// 将函原创 2022-04-22 11:05:08 · 4666 阅读 · 0 评论 -
vue中使用v-html,css不生效
1.vue中使用v-html,css不生效原创 2022-04-07 12:50:13 · 2817 阅读 · 0 评论 -
vue-生成二维码+下载二维码
<div class="img" ref="code"> <qrcode-vue :value="link" size="175" level="H" /></div><p class="down" @click="code()">下载二维码</p>import html2canvas from "html2canvas";import QrcodeVue from "qrcode.vue";components:{ Qr原创 2022-03-08 12:37:13 · 1330 阅读 · 0 评论 -
Vue实际运用二:前后端配合-控制权限 addRoute()
控制权限菜单权限控制(菜单中的页面是否能被访问)按键、请求等具体操作的权限控制菜单的权限控制需求:只显示当前用户能访问的权限内菜单,如果用户通过URL进行强制访问,则会直接进入404基本流程:获取用户权限并存储——>根据用户权限选择性渲染菜单1. 创建路由表公共路由:登录、维护等页面写到默认的路由中动态路由(权限控制):需要权限的页面写到一个变量或者一个文件中重定向路由:404一定要写在最后//router/index.jsimport Vue from 'vu原创 2021-12-21 18:11:23 · 1031 阅读 · 0 评论 -
Vue实际运用三:vuex持久化
vuex持久化vuex:刷新浏览器,vuex中的state会重新变为初始状态解决办法:使用vuex-persistedstate插件安装 npm i -S vuex-persistedstate引入及配置:在store下的index.js中import Vue from 'vue'import Vuex from 'vuex'//引入import persistedState from 'vuex-persistedstate'Vue.use(Vuex)export de原创 2021-12-22 23:37:13 · 204 阅读 · 0 评论 -
Vue实际运用四:递归组件-做树状菜单列表
递归组件使用场景:Vue的递归组件,组件递归自身实现无限制层级的渲染,适合树状菜单1.创建Tree.vue文件,作为组件树的入口文件,类似于App.vue,一些数据data会在Tree.vue进行一些初始化的操作。<template> <div> //通过自定义属性传递 数据给子组件 <TreeMenu :label="treeList.label" :nodes="treeList.nodes"></TreeMenu>原创 2021-12-23 11:06:49 · 3719 阅读 · 0 评论 -
vue实际运用六:处理token过期
vue实际运用六:处理token过期1. 后端为了安全,token一般存在有效时间,当token过期,所有请求失效解决方案:1)在请求发起前拦截每个请求,判断token的有效时间是否已经过期,若已过期,则将请求挂起,先刷新token后再继续请求。优点: 在请求前拦截,能节省请求,省流量缺点: 需要后端额外提供一个token过期时间的字段;使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败使用方法:axios.interceptors.request.use() 这原创 2021-12-24 14:37:35 · 14812 阅读 · 7 评论 -
Vue项目+切换中英文+element国际化
vue项目中切换中英文(基础版)1. 使用 vue-i18n 插件安装:npm install vue-i18n官网:https://kazupon.github.io/vue-i18n/zh/started.html2. 在main.js文件加入i18配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'// 引入VueI18原创 2022-01-10 15:38:10 · 1797 阅读 · 0 评论 -
vue+element后台管理系统+TagsView基础版
TagsView基础版1. 使用框架、插件vue2+element+vuex2. 大概思路大概需求:1、从效果图看,【人类】这个首页的tag一开始就存在,且不能被删除2、当点击左侧栏的时候,如果没有与该菜单相应的tag则新增,如果存在,变成选中状态3、删除tag时,存在几种情况,若删除的tag是当前页面的tag,那么路由就要跳转;如果删除的tag不是当前页面的tag,则不需要跳转路由4、若删除的tag是当前页面的tag,有分两种情况:如果是最后一个tag被删,那往前一个tag跳转原创 2022-01-14 17:54:58 · 2142 阅读 · 0 评论 -
Vue的axios封装
1.引入npm i axios1)在src目录中创建一个request文件夹,创建request.js文件封装axios的全局变量、拦截器等;创建api.js管理具体接口在request.js文件中import axios from ‘axios’import QS from ‘qs’ //引入qs模块,用来序列化post类型的数据import {Toast} from ‘vant’ //引入vant组件的toast提示框组件2)环境的切换,切换开发环境、测试环境和生产环境,使用ax原创 2021-12-06 00:34:35 · 446 阅读 · 0 评论 -
Vue解决跨域
解决跨域问题在vue项目的根目录中添加vue.config.js// webpack-dev-server 相关配置 devServer: { // 设置代理 host: 'localhost', // port: 8080, //自定义端口 https: false, //false关闭https,true为开启 open: true, //自动打开浏览器 proxy: { //只要请求路径中原创 2021-12-09 14:54:53 · 454 阅读 · 0 评论 -
VUE项目一:基础配置
项目运行自动打开浏览器设置在package.json文件中“scripts”:{“serve” : “vue-cli-service serve --open”}关闭eslintvue.config.js文件中module.exports={//关闭eslintlintOnSave:false}原创 2021-12-19 23:41:37 · 186 阅读 · 0 评论 -
vue实际运用一:element+前端简单控制权限
前端简单控制权限vue+element的NavMenu 导航菜单在hove组件中,左边是NavMenu 导航菜单,右边是对应组件1. 路由配置{ path: '/hove', name: 'Hove', component: ()=>import('../views/Hove.vue'), redirect: '/hove/person', children:[{ path: 'person', name: 'Perso原创 2021-12-21 10:44:30 · 445 阅读 · 0 评论