Ben kullandığı web sitesine sahip bir giriş sorununuz var:Vue-yönlendirici 2 rotayı değiştiriyor, ancak görünümü güncellemiyor mu?
- Vue.js v2.0.3
- vue-yönlendirici v2.0.1
- ben
routes.jsyılında
vuex v0.8.2 basit bir önleme kurulum
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!router.app.auth.isUserLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
Ve ancak giriş için Google API kullandıktan sonra giriş sayfası mantığı kolları login.vue, ben bu çağrı başarılı:
this.login(userData).then(
() => this.$router.push(this.redirectToAfterLogin), // Login success
() => {} // Login failed
)
mounted: function(){
if (this.auth.isUserLoggedIn){
// Let's just redirect to the main page
this.$router.push(this.redirectToAfterLogins)
}else{
Vue.nextTick(() => {
this.loadGooglePlatform()
})}}
computed: {
redirectToAfterLogin: function() {
if (this.$route.query.redirect){
return this.$route.query.redirect
}else{
return '/'
}
}
}
router.js
var VueRouter = require('vue-router')
// Router setup
export const router = new VueRouter({
linkActiveClass: "is-active",
mode: 'history',
saveScrollPosition: true,
routes: [
{ path: '', name: 'root', redirect: '/home' },
{ path: '/login', name: 'login', meta: { loadingNotRequired: true }, component: require('./pages/login.vue') },
{ path: '/logout', name: 'logout', meta: { loadingNotRequired: true }, component: require('./pages/logout.vue') },
{ path: '/home', name: 'home', title: 'Home', redirect: '/home/random', component: require('./pages/home.vue'),
children: [
{ path: 'random', name: 'random', meta: { requiresAuth: true }, title: 'Random', component: require('./pages/random.vue') }
]
}
]
})
// Redirect to login page if not logged In
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!router.app.auth.isUserLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
Şimdi burada this.login sadece çağrıdır vuex, oturum açmış kullanıcıyı güncellemek için.
ne olur giriş yaptıktan sonra, URL evde/için değiştiren, ancak DOM güncelleme yok!
DOM'ı başarıyla değiştirmenin tek yolu, location.reload()'u zorlamaktı ve yapmak istediğim şey bu değil, çünkü Dinamik olarak yüklenen G komut dosyalarını Kaybediyor.
DOM'u güncelleştirmek için görünümü zorlamak için ne yapmanız gerektiğine dair bir fikriniz var mı?
NOT: o çıkış yapıp geri-in, yönlendiren gayet
'da() => this. $ yönlendirici.push (this.redirectToAfterLogin()) , // Giriş başarısı, 'redirectToAfterLogin' sonra '()' yi özledin mi? –
@PanJunjie 潘俊杰 hm ... Hayır, bu durum sözde olduğu gibi görünmüyor ve bunu yaparsam, Type Error 'TypeError: _this2.redirectToAfterLogin bir işlev değil (…)' Kodu da düzenledim, bölüme de ekledim, ama orada pek bir şey olmadı – desicne
'redirectToAfterLogins' bir fonksiyon değil, bir fonksiyon,'() 'gerekli değildir. Yönlendirici yapılandırmanızın içeriğini gösterebilir misiniz? – jeerbl