Question

我对Vue.js相对较新，但现在我坚持了一个可能很愚蠢的简单问题。

我有两个文件，一个用于路由，另一个用于插件。

auth.js

export default {
    install: (Vue, options) => {

        Vue.prototype.$auth = {

            login: (email, password) => {
                ...
            }
        };
    }
};

和router.js

import Vue from 'vue'
import Router from 'vue-router'
import auth from '../auth'

Vue.use(auth);
Vue.use(Router);


const router = new Router({
    ...

    routes: [
        {
            path: '/',
            name: 'index',
            component: function(resolve) {
                require(['../../components/list/index.vue'], resolve)
            }
        },
        {
            path: '/admin',
            name: 'adm',
            component: function(resolve) {
                require(['../../components/admin/event.vue'], resolve)
            },
            beforeEnter: guardRoute
        }

    ]
});

function guardRoute (to, from, next) {
    console.log('?');
}

export default router;

现在在guardRoute功能我想调用插件，但我不知道如何。我试过像console.log（auth）这样的东西但是只有install（）函数而不是$ auth对象。我也尝试过console.log（Vue）或console.log（路由器），但是我无法从控制台输出中的插件调用/查找login（） - 函数或$ auth对象。那我做错了什么？有人可以帮我吗？

Answer 1

auth插件正在将$auth对象添加到Vue.prototype。因此，您需要首先获得beforeEnter导航防护中相关Vue实例的引用。

为此，您需要将回调传递给next参数。 Vue实例是回调中的第一个参数：

function guardRoute(to, from, next) {
  next(vm => vm.$auth.login('email', 'password'));
}

Here's the documentation on the navigation guards.

Vue在函数

1 个答案: