router 不能用map方法了，需要改router的結(jié)構(gòu)改為

　　　　routers=?[

? ? {?//?當(dāng)沒有匹配路由時(shí)默認(rèn)返回的首頁(yè)
? ? ? ? path:'/index',
? ? ? ? component:?index,
? ? ? ? authenticate:true
? ? },
? ? {?//?當(dāng)沒有匹配路由時(shí)默認(rèn)返回的首頁(yè)
? ? ? ? path:?'/spa/',
? ? ? ? component:?index,
? ? ? ? authenticate:true
? ? }]; //這種形式的

?

var router = new VueRouter({
mode: 'history',
base: __dirname + '/spa', routes: routers
})

最后的啟動(dòng)函數(shù)也變了

const app = new Vue({
store,
router: router,
render: h => h(App)
}).$mount('#app')

還有router方法的參數(shù)也變了， 組件內(nèi)部的鉤子函數(shù)也變了

　　　　　　組件內(nèi)部的route:{data(transition)}改為
　　　　　　beforeRouteEnter(to,?from,?next){
? ? 　　　　　　　　console.log(to.path);
? ? 　　　　　　　　next();
　　　　　　},

　　　　　　它的三個(gè)參數(shù)：

• • to: (Route路由對(duì)象) ?即將要進(jìn)入的目標(biāo)?路由對(duì)象? ?? ? to對(duì)象下面的屬性：?path ? params ?query ??hash ??fullPath ? ?matched ??name ? ?meta

  • from: (Route路由對(duì)象)??當(dāng)前導(dǎo)航正要離開的路由

  • next: (Function函數(shù)) ??一定要調(diào)用該方法來(lái)?resolve?這個(gè)鉤子。 ?

　　　　　　調(diào)用方法：next(參數(shù)或者空)???***必須調(diào)用

　　　　　　next(無(wú)參數(shù)的時(shí)候): ?進(jìn)行管道中的下一個(gè)鉤子，如果走到最后一個(gè)鉤子函數(shù)，那么 ?導(dǎo)航的狀態(tài)就是?confirmed?（確認(rèn)的）

　　　　　　next('/')?或者?next({ path: '/' }):?跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

vue2.x中的路由鉤子函數(shù)：

　　a、最先執(zhí)行的是 beforeEach鉤子，所有路由開始的時(shí)候最先執(zhí)行。用來(lái)判斷用戶是否登錄和其他頁(yè)面未進(jìn)入之前的狀態(tài)

　　b、某個(gè)路由獨(dú)享的鉤子 ?beforeEnter ?

　　　　const router = new VueRouter(

　　　　　　{ routes: [

　　　　　　　　　　{path: '/foo',

　　　　　　　　　　 component: Foo,

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

　　　　　　　　　　} ]

　　　　　　})

　　c、組件內(nèi)的鉤子函數(shù) ??

• beforeRouteEnter
• beforeRouteUpdate?(2.2 新增)
• beforeRouteLeave

　　beforeRouteEnter (to,?from, next) {} ?與 ?beforeRouteLeave不再是組件中route配置下的對(duì)象了，他們和data處于同級(jí)別的地位。

const Foo = {

　　template: `...`,

　　beforeRouteEnter (to, from, next) {

　　　　// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用

　　　　// 不！能！獲取組件實(shí)例 `this`

　　　　// 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建

　　},

　　beforeRouteUpdate (to, from, next) {

　　　　// 在當(dāng)前路由改變，但是改組件被復(fù)用時(shí)調(diào)用

　　　　// 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，

　　　　// 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。

　　　　// 可以訪問組件實(shí)例 `this`

　　},

　　beforeRouteLeave (to, from, next) {

　　　　// 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用

　　　　// 可以訪問組件實(shí)例 `this`

　　} }

可以看出：? 新設(shè)計(jì)的路由 ? ? 淡化了組件自身跟著路由生命周期變化而變化，而是依賴組件自身的生命周期。

那么接下來(lái)：

　　ajax調(diào)用時(shí)機(jī)：相對(duì)于組件來(lái)說(shuō)的，而且應(yīng)該是在路由進(jìn)入之前開始準(zhǔn)備的 所以beforeRouteEnter是調(diào)用ajax的時(shí)機(jī)。

　　watch這一函數(shù)可以監(jiān)聽路由$route變化。

　　beforeRouteLeave在組件的生命周期完成后，且舊路由即將切換走，新路由beforeEach的時(shí)機(jī)執(zhí)行。

關(guān)于導(dǎo)航的知識(shí)參考

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

import 引入的時(shí)候不能用｛｝這個(gè)包涵，否則不顯示，如果要用｛｝擴(kuò)起來(lái)的話，需要用exports暴露出來(lái)

將v-link了換成了router-link to="url"

在屬性上不能直接寫src={{}}，而是要寫成:src=""

vuex的這個(gè)錯(cuò)誤

? ? ? ? 是因?yàn)閎abel解析錯(cuò)誤，需要安裝

npm?install?--save-dev?babel-plugin-transform-object-rest-spread， 并且在webpack.js 中修改babel的配置 babel:?{ "presets":?["es2015"], plugins:?['transform-object-rest-spread'] } vue2中也有如何從vue1升級(jí)到vue2的方法，參考 http://cn.vuejs.org/v2/guide/migration.html 未完待續(xù)。。。

轉(zhuǎn)載于:https://www.cnblogs.com/wenwenli/p/6483314.html

總結(jié)

以上是生活随笔為你收集整理的vue1升级到vue2的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。