vue填坑记录:刷新浏览器,router导航守卫不响应
先来说下背景,,,最近在看Vue SSR相关知识。参考 vue-ssr 官方 例子,vue-hackernews-2.0,https://github.com/vuejs/vue-hackernews-2.0
都搞定了后,遇到一个刷新页面的问题(我指的是手动刷新浏览器,不是用router程序刷新),因为程序里router有设置 导航守卫 beforeResolve 用于数据预加载使页面呈现效果。但是,刷新页面后,一直没有响应这个导航守卫。
路由配置如下:
export default {
'/': {
viewpath: 'views/homepage',
name:'default',
title:'首页',
},
'/hero': {
viewpath: 'views/hero',
name:'hero',
title:'英雄',
},
'/tool': {
viewpath: 'views/tool',
name:'tool',
title:'装备',
},
}
分别对应三个页面,如下:
咱们先不说在页面create或者mounted做处理。 因为应用程序是打算同时支持vue SSR 和 普通 VUE 程序的,兼容代码写法,不像在vue-cli上客户端加一套逻辑。而且,有守卫导航这个好东西,就是解决这个需求的。
为甚 beforeResolve 没有生效呢???
我们来看一下 官方例子的写法,entry-client.js文件,
Vue.mixin({
beforeRouteUpdate (to, from, next) {
console.log('beforeupdate',to);
const { asyncData } = this.$options
if (asyncData) {
asyncData({
store: this.$store,
route: to
}).then(next).catch(next)
} else {
next()
}
}
})
const { app, router, store } = createApp()
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}
router.onReady(() => {
// Add router hook for handling asyncData.
// Doing it after initial route is resolved so that we don't double-fetch
// the data that we already have. Using router.beforeResolve() so that all
// async components are resolved.
router.beforeResolve((to, from, next) => {
...//这里就是我们想要,预取数据的。
注意到,这个beforeResolve守卫,是在route好了之后才设置的,目的是为了防止服务器已经获取的数据,客户端不用二次获取。 然而,在非ssr应用里,,,我们应该是在router.resolve()之前就应该设置这个导航,不能等页面router解析好了才设置。这就是为什么一刷新页面,没有响应,切换页面时正常的原因所在。
解决办法:把resovle移动到ready函数外面。当然,为了ssr的no double-fetch,,,加一个判断即可。简单的,根据 这个变量 window.__INITIAL_STATE__ 存在来判断即可。因为这个变量就是标志是服务器渲染的页面。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 口算训练 HDU - 6287
- Codeforces Round #674 (Div. 3) A ~ F 详细讲解
- C# 生成chart图表的三种方式
- C# Task.Run调用外部参数
- Git全方位指南,即用即查就可
- Python入门教程笔记(二)控制语句
- Python入门教程笔记(一)简介、变量及基本数据类型
- C#知识点讲解之C#delegate、event、Action、EventHandler的使用和区别
- typescript高级用法之infer的理解与使用
- 基于业务场景下的图片/文件上传方案总结
- LeetCode96|二叉搜索树中的搜索
- LeetCode95|字符串中的第一个唯一字符
- LeetCode94|Pow(x,n)
- LeetCode93|数值的整数次方
- LeetCode92|排序数组