vue-router

Vue Router this.$router.push not working on methods

由 ぃ、小莉子 提交于 2020-08-02 06:49:20
问题 i'm doing login, but after the login methods gets success, i'm pushing a route for the $router object and it's not working, can someone help me? my code: doLogin(){ this.attemptLogin({...this.user}).then(function(){ this.$router.push('/') } ) }, So, the login methods execute as expected, but the callback this.$router.push('/') does not runs my attemptLogin is an action, it's code is following: export const attemptLogin = ( {commit}, user) => { return http.post('login', { 'email': user.email,

angular和vue对比

由 生来就可爱ヽ(ⅴ＜●) 提交于 2020-07-28 12:43:53
框架对比 1.体积和性能 相较于vue，angular显得比较臃肿，比如一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB) ，而 angular-cli 生成的默认项目尺寸 (~65KB) 还是要小得多。 在渲染性能上，这两个框架都很快，性能上几乎没有差别。 2.开发效率 都提供了各自的脚手架工具，帮助提高从开发到构建打包的整套过程，另外均可以基于组件化开发，编写可复用的组件，大大较少重复性的工作。但angular凭借 Typescript 本身比 JavaScript 更加工程化的优势，在都是团队开发的情况下，angular会更具优势。 3.灵活性 Vue 相比于 Angular 更加灵活，可以按照不同的需要去组织项目的应用代码。比如，甚至可以直接像引用jquery那样在HTML中引用vue，然后仅仅当成一个前端的模板引擎来用。 4.可维护性 我理解的可维护性包括两个层次，一是代码的可读性，二是可重构性。同样是因为对TS（能提供静态类型检查）的支持不够全面，使得vue在这两个层次都有些不足。vue作者本人也承认vue在TS 的支持上还有所不足，在3.0版本中将会有所改进。 5.es6支持 es6是新一代的javascript标准，对JavaScript进行了大量的改进，使用es6开发已是基本需求。虽然有部分十分老旧的浏览器不支持es6

Vue.js 的主要特点

由 为君一笑 提交于 2020-07-28 09:40:24
Vue.js 是一个优秀的前端界面开发 JavaScript 库，它之所以非常火，是因为有众多突出的特点，其中主要的特点有以下几个。 1) 轻量级的框架 Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。 2) 双向数据绑定 声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。 3) 指令 Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。 4) 组件化 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。 在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。 组件还支持热重载（hotreload）。当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。CSS 也支持热重载。 5)

微前端入门-最容易看懂的微前端知识

由 旧时模样 提交于 2020-07-24 01:20:56
本文将以理论介绍的方式来对微前端这个概念做一个整体扫盲，涉及到的大多数理论知识并不会太过于对展开，如果读者对一些细节比较感兴趣，可以留言或者搜索相关的概念。 什么是微前端？ 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。 微前端不是单纯的前端框架或者工具，而是一套架构体系 ，这个概念最早在2016年底被提出，可以参考在Google上搜索Micro-Frontends, 排名靠前的https://micro-frontends.org的博客文章，提出了早期的微前端模型。 为什么会有微前端 任何新技术的产生都是为了解决现有场景和需求下的技术痛点，微前端也不例外： 拆分和细化 ：当下前端领域，单页面应用（SPA）是非常流行的项目形态之一，而随着时间的推移以及应用功能的丰富，单页应用变得不再单一而是越来越庞大也越来越难以维护，往往是改一处而动全身，由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分，并随之解耦，每个部分可以单独进行维护和部署，提升效率。 整合历史系统 ：在不少的业务中，或多或少会存在一些历史项目，这些项目大多以采用老框架类似（Backbone.js，Angular.js 1

How can I mimic onbeforeunload in a Vue.js 2 application?

由 北慕城南 提交于 2020-07-21 06:40:18
问题 I have a Vue component that is tracking when it is "dirty" (e.g. unsaved). I would like to warn the user before they browse away from the current form if they have unsaved data. In a typical web application you could use onbeforeunload . I've attempted to use it in mounted like this: mounted: function(){ window.onbeforeunload = function() { return self.form_dirty ? "If you leave this page you will lose your unsaved changes." : null; } } However this doesn't work when using Vue Router. It will

How to use Laravel authentication and vue-router together

由 做~自己de王妃 提交于 2020-07-21 02:38:08
问题 I'm new to Laravel and PHP in general, but familiar with Vue and SPA's. I know how to create authentication with Bcrypt, for example. However, I used Laravel to run php artisan make:auth and to create several different endpoints for the backend. I was trying to convert my app into a SPA using Vue, however using routing with Vue causes issues with the routes defined in the web.php. For example, I have my web.php like this, with several different routes. <?php Route::get('/{vue_capture?}',

vue-router: this.$router.push not working when updating query

由 旧街凉风 提交于 2020-07-05 07:57:44
问题 I want to update query on url. But, $router.push does not updating url. disp is different value for each call. Why? handle: function(disp) { let route = Object.assign({}, this.$route); route.query.disp = disp; this.$router.push(route); }, versions. "vue": "^2.5.17", "vue-router": "^3.0.1", route (console.log) 回答1: You shouldn't try to push to the route object. Instead you should use one of these: // literal string path router.push('home') // object router.push({ path: 'home' }) // named route

Vuejs: Show confirmation dialog before route change

由 老子叫甜甜 提交于 2020-07-04 13:01:22
问题 In my vueJS project, I want to show confirmation dialog before the current route changes. On yes, it should redirect to next desired route otherwise keep it on same route. Any idea how to achieve it? Thanks in advance. 回答1: You can use In-Component Guards beforeRouteLeave . See https://router.vuejs.org/en/advanced/navigation-guards.html . Demo: https://codesandbox.io/s/jzr5nojn39 (try navigating between home, page 1, page 2) Sample Code (using vuejs-dialog as the confirmation dialog):

How make json data available for my Vue dynamic routes

由 筅森魡賤 提交于 2020-07-04 00:19:28
问题 I have a List component where I fetch my date from db/blogs.json : created() { fetch('http://localhost:3000/blogs') .then(response => { return response.json(); }) .then(data => { this.blogs = data; }) }, In my BlogDetail.vue I have: <script> export default { data: () => { return { blogId:this.$route.params.id } }, computed: { blog() { return this.blogs.find( blog => blog.id === this.blogId ) } } } </script> But how do I get the blogs data in this component, which I fetched in the List

Configure VueJS pages (multiple pages in vue.config.js) MPA

由 跟風遠走 提交于 2020-06-27 16:20:25
问题 I'm making a MPA , using an admin side and a client side. I need to configure the vue.config.js to do that. I found in the documentation that I need to make an object of every page. (https://cli.vuejs.org/config/#pages) These are the mines: module.exports = { pages: { admin: { entry: 'src/Admin/main.js', template: 'public/admin.html', filename: 'admin.html', title: 'Admin Page', chunks: ['chunk-vendors', 'chunk-common', 'admin'] }, index: { entry: 'src/Client/main.js', template: 'public
订阅 vue-router