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

 

未完待续。。。