Q-Logo 我的学习笔记分享

Entries for tag "vuejs"

Vue 路由报错Navigating to current location ("/postlist/") is not allowed

局部解决

在报错的push 语句后面增加catch ,例如:

this.$router.push({ path: '/postlist/', query: { categories: cid } }).catch(err => err)

这样修改后,就不会再报上面的错误了。

全局解决

在导入vue-router之后,重写push方法增加catch 。具体就是在src/router/index.js 里面import Router from 'vue-router' 之后进行修改,例如:

import VueRouter from 'vue-router'

const stdPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {

return stdPush.call(this, location).catch(error=> error)

}

@Vue/CLI 开发前端项目时跨域访问后端服务器

当时用vue.js 作为前端框架进行开发时,一般是采用前后端分离的方式,在约定好接口的情况下,前端与后端可以分别各自独立开发。所谓分久必合,在开发到一定程度后,前后端需要联调时,就需要将两者结合起来,前端要通过ajax 方式向后端去请求数据。这时,往往就需要跨域请求数据,否则控制台可能会报带有“Access-Control-Allow-Origin”的错误。

解决办法是,编辑vue项目根目录下的vue.config.js文件(没有就自行创建一个),在devServer的proxy配置中跨域,详见本文内容。

Quasar框架-初步介绍

Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源前端框架 ,其概念清晰明确,风格简洁优雅,功能实用强大,组件丰富多样,操作简单方便,文档详细完善,目标宏伟远大。Quasar 框架在性能、安全、应用扩展支持、全平台支持、多语言支持、自动化测试支持等方面都有着执着的追求, 鼓励遵循Web开发最佳实践 , 为开发人员提供了诸多开箱即用的强大功能 ,能帮助开发者以最短时间开发应用, 让开发人员生活更轻松 ,是一个很棒的框架。

本地预览@vue/cli构建的前端项目dist目录中的文件

vue构建的dist 目录需要启动一个 HTTP 服务器来访问 ,以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如serve或http-server。另外,如果在构建前,已经将 publicPath 配置为了一个相对的值,那么构建后也是可以直接双击index.html打开文件进行本地预览的。