CHANSHIYU
GITHUBZERO
  • README
  • 時雨
    • 2017
      • 01 网站动态标题的两种方式
      • 02 RN App 外部唤醒踩坑记
    • 2018
      • 01 不一样の烟火
      • 02 Python 之禅
      • 03 Python 文件操作
    • 2019
      • 01 Aurora 食用指南
      • 02 Godaddy 域名找回记事
      • 03 一个接口的诞生
      • 04 SpringMVC 前后端传参协调
      • 05 主题集成友链访问统计
      • 06 Github Style 博客主题
      • 07 字符编码の小常识
      • 08 WSL 安装 Docker 实录
      • 09 Eriri comic reader
      • 10 Aurora 2.0
      • 11 jsDelivr 全站托管
      • 12 两年工作台变迁史
      • 13 春物
      • 14 一种优雅の笔记方式
    • 2020
      • 01 Telegram 电报机器人
      • 02 她的眼里有星辰
      • 03 文心雕龙
      • 04 软萌木子の有趣笔谈
      • 05 Telegram RSS 订阅频道
      • 06 水月雨银色飞船
      • 07 五年前旧照
    • 2021
      • 01 春宵苦短 2020
      • 02 风花
    • 2022
      • 01 小城新貌
      • 02 原神满级纪念
    • 2023
      • 01 2022 逆旅
      • 02 半透明背景图实现
      • 03 新年攒台海景房
  • 前端
    • JavaScript
      • 01 JavaScript 秘密花园
      • 02 JavaScript 正则技巧
      • 03 从浏览器解析 JS 运行机制
      • 04 Canvas 基础用法
      • 05 Blob Url And Data Url
      • 06 函数节流与函数防抖
      • 07 排序算法初探
      • 08 洗牌算法实现数组乱序
      • 09 正则匹配 match 和 exec
      • 10 正则匹配汉字
      • 11 JSX.Element vs ReactElement
      • 12 可选链与空值合并
      • 13 TypeScript 编码规范
      • 14 Typescript 中 interface 和 type 区别
      • 15 TypeScript 高级类型
      • 16 TypeScript 关键字
      • 17 TypeScript 映射类型
    • CSS
      • 01 Flex 弹性布局
      • 02 Position 定位
      • 03 CSS 逻辑属性
    • Node
      • 01 Node Tips
      • 02 七天学会 NodeJS
    • Note
      • 01 Note
      • 02 Code
      • 03 Snippets
      • 04 Git
    • React
      • 01 React Props Children 传值
      • 02 Use a Render Prop!
      • 03 React Hook
      • 04 React Hook 定时器
      • 05 Fetch data with React Hooks
      • 06 React 和 Vue 中 key 的作用
      • 07 useCallback 的正确使用方式
      • 08 useLayoutEffect 和 useEffect 的区别
      • 09 forwardRef 逃生舱
      • 10 React 条件渲染
    • Vue
      • 01 Vue Tips
      • 02 Vue 构建项目写入配置文件
      • 03 Vue 项目引入 SVG 图标
      • 04 Vue 一键导出 PDF
      • 05 动态可响应对象
      • 06 Vue 引入 SCSS
      • 07 Vue 路由权限控制
    • 实战系列
      • 01 WebSocket 心跳重连机制
      • 02 图片加解密二三事
      • 03 优雅实现 BackTop
      • 04 动态加载 JS 文件
      • 05 常用 DOM 方法比较
      • 06 AbortController 中断 fetch
      • 07 计算字符所占字节数
      • 08 Axios 自定义返回值类型
  • 后端
    • Java
      • 01 面向对象基本特征与原则
      • 02 Java 数据类型
      • 03 Java String
      • 04 Java 只有值传递
      • 05 Java final 与 static
      • 06 Java Object 通用方法
      • 07 Java 继承
      • 08 Java 反射
      • 09 Java 异常
      • 10 Java 容器
      • 11 Java 虚拟机
      • 12 Java IO
      • 13 Java HashMap
      • 14 Java List
      • 15 Java Stream
      • 16 Java 枚举
      • 17 Java 日期与时间
      • 18 Java fail fast
      • 19 Java BiFunction 和 BinaryOperator
    • 并发编程
      • 01 Java 并发
      • 02 synchronized
      • 03 volatile
      • 04 ReentrantLock
      • 05 ReadWriteLock
      • 06 StampedLock
      • 07 CompletableFuture
      • 08 ForkJoin
      • 09 ThreadLocal
      • 10 CountDownLatch
      • 11 ThreadPoolExecutor
      • 12 ExecutorService
      • 13 Atom 原子类
      • 14 BlockingQueue
    • 高效编程
      • 01 30 seconds of java8
      • 02 函数式替代 for 循环
      • 03 Java 字符串拼接
      • 04 单例模式的几种实现
      • 05 HashMap 排序
    • 理论概念
      • 01 Java Servlet
      • 02 Java 服务端分层模型
      • 03 经典排序算法
      • 04 LRU 缓存淘汰算法
      • 05 BloomFilter 判断元素存在
      • 06 Java HashMap 面试大全
      • 07 HTTP 状态码详解
      • 08 Cookie 和 Session
      • 09 基于消息队列的分布式事务解决方案
      • 10 微服务之所见
    • 实战系列
      • 01 AES CBC 加解密
      • 02 Magic 魔数获取文件类型
      • 03 获取请求 IP 地址
      • 04 Kaptcha 与数学公式验证码
      • 05 Netty 获取客户端 IP.md
      • 06 高性能无锁队列 Disruptor.md
      • 07 前后端接入阿里云盾
    • Linux
      • 01 Linux 文件权限系统
      • 02 Linux 常用软件安装
      • 03 CentOS 防火墙
    • MySQL
      • 01 MySQL
      • 02 SQL 语句 where 1=1
      • 03 truncate 和 delete
      • 04 事务
      • 05 关系模型
      • 06 Mybatis
      • 07 MySQL 查看数据库表详情
    • Nginx
      • 01 Nginx 指北
      • 02 nginx gzip 压缩
    • Note
      • 01 Vagrant
      • 02 Docker
      • 03 Lombok
      • 04 Swagger
      • 05 Redis
    • Spring
      • 01 Spring Boot
      • 02 Spring Validation
      • 03 Spring Data
      • 04 Spring 容器
      • 05 Spring AOP
      • 06 Spring Transactional 注解
      • 07 Spring Cloud Netflix
      • 08 Spring Cloud Alibaba
      • 09 Spring Security oAuth2
      • 10 Spring Boot 跨域解决方式
      • 11 Spring Boot 请求拦截
      • 12 Spring Boot 异步编程
      • 13 Spring Boot 定时任务
      • 14 Spring Boot 管理 bean
      • 15 Mybatis 逆向代码生成
      • 16 JWT
      • 17 JPA
      • 18 Apache Shiro
      • 19 Spring 异步请求
  • 书斋
    • ES6 标准入门
      • 01 变量声明与解构赋值
      • 02 语法的扩展
      • 03 数据类型与数据结构
      • 04 Proxy 和 Reflect
      • 05 异步编程 Promise
      • 06 Iterator 和 for of 循环
      • 07 Generator 函数
      • 08 Async 函数
      • 09 Class 类
    • JavaScript 设计模式
      • 01 基础知识
      • 02 设计模式(上)
      • 03 设计模式(下)
      • 04 设计原则和编程技巧
  • 纸函
    • 01 Interview
    • 02 Ceph
    • 03 动态规划
    • 04 Document.designMode
    • 2023-01-10
  • 万藏
    • 文档
      • 01 Git 文档
      • 02 Linux 命令大全
      • 03 七天学会 NodeJS
      • 04 Algorithms
    • 工具
      • 01 Nginx Config
      • 02 ProcessOn
      • 03 Flat Icon
      • 04 Regexper
      • 05 TempMail
      • 06 Carbon
由 GitBook 提供支持
在本页
  • 001 redirect 刷新页面
  • 002 removeRoutes
  • 003 引入 CDN 文件
  • 004 Watch immediate
  • 005 Attrs 和 Listeners
  • 006 Google 桌面通知

这有帮助吗?

  1. 前端
  2. Vue

01 Vue Tips

上一页Vue下一页02 Vue 构建项目写入配置文件

最后更新于2年前

这有帮助吗?

001 redirect 刷新页面

目的是在不刷新页面的情况下更新路由,实现类似 location.reload() 的功能,区别是只更新路由而不是刷新整个页面。关于这个问题的讨论可以查看 Github Issues 。

实现方法是注册一个 redirect 的路由,手动重定向页面到 /redirect 页面,然后再将页面重定向回来,由于页面的 key 发生了变化,从而间接实现了刷新页面组件的效果。

参考 vue-element-admin 的实现方案:

// 1. 手动注册 redirect 路由【redirect.vue】
<script>
export default {
  beforeCreate() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>


// 2. 其他页面手动重定向到 '/redirect' 页面
const { fullPath } = this.$route
this.$router.replace({
  path: '/redirect' + fullPath
})

002 removeRoutes

Vue Router 可以通过 addRoutes 来添加动态路由,却没有方法来移除路由。这就是导致一个问题,当用户权限发生变化的时候,或者说用户登出的时候,只能通过刷新页面的方式,才能清空之前注册的路由。作为一个 SPA 应用,刷新页面其实是一种很糟糕的用户体验。

Vue Router 注册的路由信息都是存放在 matcher 之中的,所以如果想清空路由,只需要将 matcher 清空即可。那如何实现呢?首先新建一个空的 Router 实例,将之前路由的 matcher 替换为空实例的 matcher 即可。

参考 vue-element-admin 的实现方案:

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  })

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

003 引入 CDN 文件

对于项目中用到的一些第三方库,可以通过 CDN 的方式来引入,这样可以增加项目构建的速度,而且如 jsdelivr、unpkg 等 CDN 源提供免费的资源加速与缓存优化。一般的 CDN 资源引入方式是在 index.html 里直接引入外链,但是这种方式不够优雅,通过 webpack 可以用更 Geek 的方式实现。

参考 vue-element-admin 的实现方案:

// vue.config.js
module.exports = {
  productionSourceMap: false,
  chainWebpack(config) {
    const cdn = {
      css: ['//fonts.googleapis.com/css?family=Noto+Serif+SC'],
      js: ['//cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js']
    }
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

然后在 public/index.html 中依次注入 css 与 js:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 引入样式 -->
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>" />
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
    <% } %>
  </body>
</html>

004 Watch immediate

Vue watch 数据时在实例初始化时并不会执行,只有初始化后更新才会触发。如何让 watch 在初始化时候也执行呢?

其实 watch 的变量可以申明为一个对象,对象提供三个属性 immediate、deep、handler。immediate 表示初始化时是否立即执行。deep 表示是否进行深度监听,如果 watch 一个对象,设置深度监听的话如果对象的某个属性更新的话也会触发。handler 表示更新的回调函数。

watch: {
  query: {
    immediate: true,
    deep: true,
    handler(val) {
      console.log('new val', val)
    }
  }
}

005 Attrs 和 Listeners

如果有 react 使用经验的同学会知道,在 react 中可以通过扩展运算符来一次性传递多个 props,但是在 Vue 中如何实现呢?

// React 中一次性传入多个 props
<Hello {...props} />

在 vue 2.4 版本中新增了两个新特性,v-bind="$attrs" 传递所有属性,v-on="$listeners" 传递所有方法,这两个属性在进行第三方组件封装和写高阶组件时大有妙用。

在高阶组件中,本质是实现一个中间件,将父组件传过来的 props 传递给子组件,如果传递 props 有很多,这两个新属性就派上了用场,这让我们不必要在 $props 中申明方法和属性而可以直接引用。

<Hello v-bind="$attrs" v-on="$listeners" />

006 Google 桌面通知

首先定义插件:

// notification.js
let notification = {}
notification.install = function(Vue, options) {
  Vue.prototype.$notification = (title, options) => {
    // 先检查浏览器是否支持
    if (!('Notification' in window)) {
      alert('很抱歉当前浏览器不支持桌面通知!')
    } else if (Notification.permission === 'granted') {
      // 检查用户是否同意接受通知
      notification = new Notification(title, options)
      notification.onclick = function() {
        window.focus()
      }
    } else if (Notification.permission !== 'denied') {
      // 否则我们需要向用户获取权限
      Notification.requestPermission(function(permission) {
        // 如果用户同意,就可以向他们发送通知
        if (permission === 'granted') {
          notification = new Notification(title, options)
          notification.onclick = function() {
            window.focus()
          }
        }
      })
    }
  }
}
export default notification

然后注册插件:

// main.js
import Notification from '@/utils/notification'
Vue.use(Notification)

食用方式:

this.$notification('提示', {
  body: '提示内容',
  icon: 'static/icon.png'
})
[Feature] A reload method like location.reload()