vue1升级到vue2的问题
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
})
store,
router: router,
render: h => h(App)
}).$mount('#app')
組件內(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
? ? ? ? 是因?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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java parseint()
- 下一篇: 浅谈前端是否需要精通JS三大框架,vue