beforeRouteEnter在每次路由切换都执行 ,而项目优化后,切换路由mounted只在最开始执行一次

beforeRouteEnter的具体用法可参考官方文档 https://cn.vuejs.org/v2/guide/migration-vue-router.html#activate-替换

需要注意的是：
在这期间路由跳转携带的数据发生改变会影响原数据，他们都指向同一个内存地址,修改其中一个变量，会影响到其他所有变量，可通过
 vm.form = JSON.parse(JSON.stringify(vm.$route.params))  方式解决

vue-router之 beforeRouteEnter的更多相关文章

  1. Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  2. Vue Router的配置

    1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...

  3. Vue躬行记（8）——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  4. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  5. Vue Router的导航解析过程

    在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...

  6. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  7. Vue Router 路由守卫：完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  8. Vue Router的简单了解

    Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...

  9. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  10. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 深度学习笔记之使用Faster-Rcnn进行目标检测 （实践篇）

    实验 我使用的代码是Python版本的Faster Rcnn,官方也有Matlab版本的,链接如下: py-faster-rcnn(python) faster-rcnn(matlab) 环境配置 按 ...

  2. MySql InnoDb还原工具

    通过任意文件下载找到了mysql的备份,表类型是独享式innodb,由一个frm文件和一个ibd文件组成. 本以为直接复制到本地的mysql数据目录中即可恢复数据,但在查询时却发现并不如所愿: mys ...

  3. Codeforces 480B Long Jumps 规律题

    题目链接:点击打开链接 题意: 输出n l x y 有一根直尺长度为l 上面有n个刻度. 以下n个数字是距离开头的长度(保证第一个数字是0,最后一个数字是l) 要使得 直尺中存在某2个刻度的距离为x ...

  4. 我的kindle书单

    刚刚入手kindle,希望能够持续阅读,不断进步. 列下书单,记录我的阅读足迹,更希望园友若有好书多多推荐,互相交流. # keep updating ... 我的kindle书单 book name ...

  5. Struts2中ValueStack结构和总结

    [ValueStack和ActionContext的关系] 首先,从结构上来看ValueStack是ActionContext的一个组成部分,是对ActionContext功能的扩展.ActionCo ...

  6. 如何写好react组件

    react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Cr ...

  7. android stdio 异常

    1.android studio gradle project sync failed File -> Settings 搜索Gradle 2.eqmu-system-i386未响应   分辨率 ...

  8. jsp useBean

    <jsp:uesBean id="test" scope="page" class="test.useBeanTest"> 用于 ...

  9. YTU 1010: 目标柏林

    1010: 目标柏林 时间限制: 1000 Sec  内存限制: 64 MB 提交: 32  解决: 15 题目描述 1945年初,苏军和英美联军已从东西两面攻入德国国境. 4月初,在苏军和英美联军的 ...

  10. 通过查询数据库中的数据匹配在页面上：（set单条数据属性是在页面上的显示与foreach的不同） 通过ID修改提取位置表信息

    ACTION   OpenModifyExtractPositionById // set单条数据属性 /* * 通过ID修改提取位置表信息 */ public String OpenModifyEx ...