vue项目,不使用window.location.reload(),如何刷新当前页面?
基本原理,利用key
属性,key
变化时组件会重新渲染
main.vue
// 假如需要刷新的页面,都是基于`main.vue`的`<router-view>打开`
...
<div>
<router-view
:key="this.refreshKey ? this.refreshKey : this.$route.fullPath"
/>
</div>
...
computed: {
...mapGetters(['refreshKey']),
}
vuex
vuex设置了一个全局变量refreshKey
export default new Vuex.Store({
state: {
// 刷新key
refreshKey: '',
},
mutations: {
// 设置刷新
setRefreshKey(state, key) {
state.refreshKey = key;
},
},
getters: {
refreshKey: state => state.refreshKey,
},
actions: {},
modules: {},
});
网络报错时,显示的Error页面
报错页面中,我们点击刷新按钮,设置刷新Key,每次刷新的时候,key要不一样,所以用了时间戳
<template>
<div>
<div class="loading-error">
<p>网络错误,请检查网络或刷新页面重试</p>
<p>如果网络没问题,多次刷新后还是不行,欢迎反馈给我们</p>
<a-button type="primary" @click="refresh" style="margin-top: 20px"
>刷新</a-button
>
</div>
</div>
</template>
<script>
export default {
methods: {
refresh() {
this.$store.commit('setRefreshKey', new Date().getTime());
},
},
};
</script>
<style lang="less" scoped>
.loading-error {
margin: 0 auto;
text-align: center;
padding: 100px 0;
svg {
margin-bottom: 20px;
}
p {
color: #999;
}
}
</style>
Router
正常跳转路由时,清空refreshKey
router.beforeEach((to, from, next) => {
store.commit('setRefreshKey', '');
next();
});
使用create-vue创建vue3项目,vite,vue3
相对VUE2 ,VUE3做了哪些优化和改进呢?
vue项目,不使用window.location.reload(),如何刷新当前页面?
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
vue2.0 v-html指令有潜在的xss风险,如何解决?
vue项目通过axios怎么下载二进制文件或图片?
ant.design UI框架 同时使用v-model或value属性时, placeholder不显示
如何在VUE项目中添加stylelint,检查css,scss,less的语法问题,保证团队代码的规范统一
VUE全局函数
定义了服务端渲染的属性名称常量SSR_ATTR,定义了一些资产类型常量ASSET_TYPES,定义了生命周期相关钩子函数的函数名称
使用iviewui-admin框架构建管理系统时,遇到的各类问题
vue项目中动态图片路径拼接
vue下filter方法的调用
21个vue顶级UI框架: Vuetify,Quasar,Vue Material,Keen-UI,Buefy,Bootstrap Vue,Muse-UI,AT-UI,Vux,iView,Uiv,Vuikit,Onsen UI+Vue,Semantic UI+Vue,Fish-UI,Mint UI,Framework7 Vue,Cube UI,Vueblu,Ant Design Vue
&amp;amp;quot;.vue&amp;amp;quot;文件是如何解析成js对象的~
立个flag,看过年这段时间能不能把vue的源码读完?多年前看过jQuery的部分源码,如果想要更深入的了解vue,还是得从源码开始
vue源码阅读,慢慢学习
vue的生命周期函数
vue组件的数据data为什么一定要是函数 ?
Mint-ui this.$messagebox点取消时,报错:Uncaught (in promise) cancel
vue-validate使用
这就是个vue的坑。。。
vue如何监听enter事件?
vue使用axios进行form表单提交
vue中如何改变title标题
如果在vue2.0中使用NProgress进度条
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。也是vue2.0官方推荐的,同时不再对vue-resource(vue1.0使用)进行更新和维护
分析Vue.js源码
npm run dev模式下,webpack4+vue2项目下,类似'/user/login'二级路由,刷新时静态资源路径不对,静态资源返回404
[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
did you register the component correctly? For recursive components, make sure to provide the "name" option
vue.js如何查看注册了哪些组件,获取组件名称
vue底层的Virtual DOM就是基于snabbdom修改的