[Vue.js]グローバルフック関数


<div id="app">
    <router-link to="/users">USER</router-link>
    <router-view></router-view>
</div>
Vue.js
var router = new VueRouter({
    routes: [
        {
            path: '/users',
            component: {
                template: '<h1>ユーザーページです</h1>'
            }
        },

        {
            path: '/top',
            component: {
                template: '<h1>トップページです</h1>'
            }
        },
    ]
})

router.beforeEach((to, from, next) => {
    // ユーザー一覧ページへアクセスした時に / topへリダイレクトする例
    if (to.path === '/users') {
        next('/top')
    } else {
        // 引数なしでnextを呼び出すと通常通りの遷移が行われる
        next()
    }
})

var app = new Vue({
    router: router
}).$mount('#app')

これで、usersではなくてtopに遷移される