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')

3. 還有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

3. import 引入的時候不能用｛｝這個包涵，否則不顯示，如果要用｛｝擴起來的話，需要用exports暴露出來
4. 將v-link了換成了router-link to="url"
5. 在屬性上不能直接寫src={{}}，而是要寫成:src=""
6. 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

 

未完待續。。。