web-dev-qa-db-ja.com

Vue-router 2はルートを変更しますが、ビューを更新しませんか？

以下を使用するWebサイトでログインの問題があります。

  • Vue.js v2.0.3
  • vue-router v2.0.1
  • vuex v0.8.2

_routes.js_には、簡単なインターセプターのセットアップがあります

_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()!
}
_

}）

ログイン_login.vue_では、ログインが成功した場合にのみGoogle APIを使用した後、ログインページのロジックを処理します。

_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()!
    }
})
_

ここで_this.login_は、ログインしたユーザーを更新するための、vuexへの呼び出しです。

ログイン後にRL変更が/ homeに変更されますが、-DOMは更新されません！

DOMを正常に変更した唯一の方法はlocation.reload()を強制することでしたが、Headで動的に読み込まれたGスクリプトが失われるため、私がしたいことではありません。

ビューにDOMを強制的に更新させるにはどうすればよいですか？

注：ユーザーが最初にログインしたときにのみ発生します。ユーザーがログアウトして再度ログインした場合、リダイレクトは問題ありません。

javascriptvue.jsvuejs2vue-router
12
desicne

コンポーネントを再作成するため、完全なソリューションではない可能性がありますが、同じルートがあり、コンポーネントを更新する必要がある場合にすべてのケースで機能します。

<router-view/>または<router-view></router-view>を

<router-view :key="$route.fullPath"></router-view>
3
techyaura

Vueは可能な限りコンポーネントを再利用します。同じコンポーネントを使用するルートスイッチに対応するには、beforeRouteUpdateを使用する必要があります。

1
adri

おそらく、redirectToAfterLogin関数をメソッドに設定する必要があります。このように、毎回再計算されます。計算は、使用されているvモデルが変更された場合にのみ変更されます。関数名の意味を守るために、ルータの内部にPushを設定します。

login.vue：

mounted: function(){
   if (this.auth.isUserLoggedIn){
            // Let's just redirect to the main page
            // this.$router.Push(this.redirectToAfterLogins)
            this.redirectToAfterLogins()
   }else{
            Vue.nextTick(() => {
                this.loadGooglePlatform()
            })
   }
},
// computed: {
methods: {
    this.login(userData).then( 
       // () => this.$router.Push(this.redirectToAfterLogin), // Login success
       () => this.redirectToAfterLogin(), // Login success
       () => {} // Login failed
    ),
    redirectToAfterLogin: function() {

        if (this.$route.query.redirect){
            // return this.$route.query.redirect
            this.$router.Push(this.$route.query.redirect)
        }else{
            // return '/'
            this.$router.Push('/')
        }
    }
}

「ただし、計算されたプロパティは依存関係に基づいてキャッシュされるという違いがあります。計算されたプロパティは、依存関係の一部が変更された場合にのみ再評価されます。つまり、メッセージが変更されていない限り、reversedMessage計算プロパティへの複数のアクセスが行われます。関数を再度実行する必要なく、以前に計算された結果をすぐに返します。」

メソッド対計算およびフィルター：

0
Lucile Fievet

「URLは/ homeに変更されますが、DOMが更新されない」という同じ問題があります。
私のプロジェクトでは、タグ「transition」が問題を引き起こしました。
それが役に立てば幸い！

0
silang