vue1升级到vue2的问题

  1. router 不能用map方法了,需要改router的结构改为

    routers= [

    { // 当没有匹配路由时默认返回的首页
        path:'/index',
        component: index,
        authenticate:true
    },
    { // 当没有匹配路由时默认返回的首页
        path: '/spa/',
        component: index,
        authenticate:true
    }]; //这种形式的

 

var router = new VueRouter({
mode: 'history',
base: __dirname + '/spa',
    routes: routers
})
  1. 最后的启动函数也变了
const app = new Vue({
store,
router: router,
render: h => h(App)
}).$mount('#app')
  1. 还有router方法的参数也变了, 组件内部的钩子函数也变了

      组件内部的route:{data(transition)}改为
      beforeRouteEnter(to, from, next){
            console.log(to.path);
            next();
      },

      它的三个参数:

    • to: (Route路由对象)  即将要进入的目标 路由对象       to对象下面的属性: path   params  query   hash   fullPath    matched   name    meta

    • from: (Route路由对象)  当前导航正要离开的路由

    • next: (Function函数)   一定要调用该方法来 resolve 这个钩子。  

      调用方法:next(参数或者空)   ***必须调用

      next(无参数的时候):  进行管道中的下一个钩子,如果走到最后一个钩子函数,那么  导航的状态就是 confirmed (确认的)

      next('/') 或者 next({ path: '/' })跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

vue2.x中的路由钩子函数:

  a、最先执行的是 beforeEach钩子,所有路由开始的时候最先执行。用来判断用户是否登录和其他页面未进入之前的状态

  b、某个路由独享的钩子  beforeEnter  

    const router = new VueRouter(

      { routes: [

          {path: '/foo',

           component: Foo,

           beforeEnter: (to, from, next) => { // ... }

          } ]

      })

  c、组件内的钩子函数   

  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave

  beforeRouteEnter (to, from, next) {}  与  beforeRouteLeave不再是组件中route配置下的对象了,他们和data处于同级别的地位。

const Foo = {

  template: `...`,

  beforeRouteEnter (to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不!能!获取组件实例 `this`

    // 因为当钩子执行前,组件实例还没被创建

  },

  beforeRouteUpdate (to, from, next) {

    // 在当前路由改变,但是改组件被复用时调用

    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

  },

  beforeRouteLeave (to, from, next) {

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

  } }

可以看出:  新设计的路由     淡化了组件自身跟着路由生命周期变化而变化,而是依赖组件自身的生命周期。

那么接下来:

  ajax调用时机:相对于组件来说的,而且应该是在路由进入之前开始准备的 所以beforeRouteEnter是调用ajax的时机。

  watch这一函数可以监听路由$route变化。

  beforeRouteLeave在组件的生命周期完成后,且旧路由即将切换走,新路由beforeEach的时机执行。

关于导航的知识参考

http://router.vuejs.org/zh-cn/advanced/navigation-guards.html

  1. import 引入的时候不能用{}这个包涵,否则不显示,如果要用{}扩起来的话,需要用exports暴露出来
  2. 将v-link了换成了router-link to="url"
  3. 在属性上不能直接写src={{}},而是要写成:src=""
  4. vuex的这个错误

        是因为babel解析错误,需要安装

npm install --save-dev babel-plugin-transform-object-rest-spread,
并且在webpack.js 中修改babel的配置
babel: {
"presets": ["es2015"],
plugins: ['transform-object-rest-spread']
}
vue2中也有如何从vue1升级到vue2的方法,参考
http://cn.vuejs.org/v2/guide/migration.html
未完待续。。。

转载于:https://www.cnblogs.com/wenwenli/p/6483314.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417231.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python寻找字符串中的英文字符,python如何解析字符串中出现的英文人名?

这里有四个例子,结果来自google scholarstr1 "Jakes, William C., and Donald C. Cox. Microwave mobile communications. Wiley-IEEE Press, 1994."str2 "Schlegel, David J., Douglas P. Finkbeiner, and Marc Davis. \"Maps of dust infra…

win2003/XP删除桌面回收站

gpedit.msc 用户配置——管理模板——桌面——从桌面删除回收站——启用刷新桌面即可。

Spring Boot 学习笔记--整合Thymeleaf

1.新建Spring Boot项目 添加spring-boot-starter-thymeleaf依赖 1 <dependency> 2 <groupId>org.springframework.boot</groupId> 3 <artifactId>spring-boot-starter-thymeleaf</artifactId> 4 </dependency> 2.添加静态文件 根据…

mongo php update 写法,mongodb update 字符 操作

下面常用的update操作&#xff0c;用mongodb2.6.3版本测试的&#xff0c;官方发布的稳定版本2.4&#xff0c;建议用稳定版。 一&#xff0c;upsert表示如果有数据就不插入&#xff0c;没数据就插入 1&#xff0c;命令行下 db.peoples.update( //查找name等于tank的用户... { na…

js 打印

window.print(); 打印隐藏部分<style type"text/css" media"print">.noprint{display:none;}</style>

oracle 增加一个新分区,oracle 11g 新增分区

oracle 11g新增了间隔分区、虚拟列分区和引用分区。详细的介绍请查看官方文件&#xff1a;1. 间隔分区间隔分区是范围分区的一种扩展。在引入间隔分区之前&#xff0c;DBA 需要显式定义每个分区的值范围&#xff0c;随着分区值的增长可用分区会逐渐减少直到没有可使用的分区为止…

jquery.uploadify flash IE6上传无效

类似$().window&#xff0c;以div方式打开弹窗&#xff0c;弹窗中iframe中就是上传页面&#xff0c;页面加载时就加载上传页面会产生这个问题。解决办法&#xff1a;打开弹窗后再给iframe赋src值。

如何手动修改oracle表空间,ORACLE数据库创建和修改表空间

-建立表空间(oracle中的tablespace(表空间))CREATE TABLESPACE data01DATAFILE D:\oracle\ora92\oradata\db\DATA01.dbf SIZE 200MUNIFORM SIZE 128k;#指定区尺寸为128k,如不指定&#xff0c;区尺寸默认为64k--建立临时表空间CREATE TEMPORARY TABLESPACE temp_dataTEMPFILE D:…

dexpler的使用方法

https://www.abartel.net/dexpler/转载于:https://www.cnblogs.com/yuqt/p/6490848.html

jquery.uploadify参数

uploadify函数的参数为json格式&#xff0c;可以对json对象的key值的修改来进行自定义的设置&#xff0c;如multi设置为true或false来控制是否可以进行多文件上传&#xff0c;下面就来介绍下这些key值的意思&#xff1a; uploader &#xff1a; uploadify.swf 文件的相对路径&a…

Kaggle入门篇

Kaggle入门篇转载于:https://www.cnblogs.com/akrusher/articles/6492096.html

超链接js点击后页面向上滚动问题解决

超链接js点击后页面向上滚动问题解决 <a href"#" οnclick"fun();return false;"></a>

Oracle数据导入要多久,oracle数据库备份导入要注意的几个问题

oracle数据库备份导入要注意的几个问题(1)oracle数据库备份的导入对数据库的版本有要求&#xff0c;也即源数据库(导出产生备份的数据库)的版本要和目标数据库(导入数据库)的版本一致&#xff0c;否则可能导致导入失败。(2)备份中的用户名(数据库导出时所使用的用户)和导入数据…

BZOJ 4241 分块

思路&#xff1a; 考虑分块 f[i][j]表示从第i块开头到j的最大值 cnt[i][j]表示从第i块开始到序列末尾j出现了多少次 边角余料处理一下就好啦~ //By SiriusRen #include <cmath> #include <cstdio> #include <algorithm> using namespace std; const int …

common lisp 学习第一天 初步接触

http://common-lisp.net/project/lispbox/lispbox 集成了Emacs、Slime和CCL。解压后直接运行lispbox.bat即可//(quote x) 返回 x&#xff0c;我们简记为 x> (quote x)x> xx//(atom x) 当 x 是一个原子或者空表时返回原子 t&#xff0c;否则返回NIL。在 Common Lisp 中我们…

oracle数据泵导入分区表,数据泵导入分区表统计信息报错(七)

其实问题的引出是由于出现第一篇文章中描述的问题&#xff0c;不过随着问题的深入研究&#xff0c;挖掘出了一些隐藏的很深的问题&#xff0c;不过问题的研究也慢慢脱离了原本的问题。在解决了表统计信息锁定的问题后&#xff0c;在回过头看看导致第一篇文章中错误的具体原因。…

django ORM创建数据库方法

1、指定连接pymysql(python3.x) 先配置_init_.py import pymysqlpymysql.install_as_MySQLdb() 2、配置连接mysql文件信息 settings.py DATABASES {default: {ENGINE: django.db.backends.mysql, NAME: django_orm, #你的数据库名称USER: root, #你的数据库用户名PASSWOR…

common lisp 学习第二天 简单数据库操作

//简单数据操作单一记录> (defun make-cd (title artist rating ripped)(list :title title :artist artist :rating rating :ripped ripped))make-cd> (make-cd "Roses" "Kathy Mattea" 7 t)(:TITLE "Roses" :ARTIST "Kathy Mattea&…

通过配置文件登陆有密码的mysql不需要输入密码

下面方式通过配置文件登陆有密码的mysql&#xff0c;不需要输入密码。 &#xff08;1&#xff09;先配置一个.my.cnf配置文件。 [client]userxxxxpasswordxxxxxx (2)直接登陆mysql服务 [rootlocalhost scripts]# HOME/var/lib/zabbix mysql 直接登陆&#xff0c;这里的HOME一…

并联机械臂的pid控制Matlab,机械手PID控制(chap2_1ctrl.m)

【实例简介】【实例截图】【核心代码】function [sys,x0,str,ts] spacemodel(t,x,u,flag)switch flag,case 0,[sys,x0,str,ts]mdlInitializeSizes;case 3,sysmdlOutputs(t,x,u);case {2,4,9}sys[];otherwiseerror([Unhandled flag ,num2str(flag)]);endfunction [sys,x0,str,…