Javascript vue路由器意外重定向

Javascript vue路由器意外重定向,javascript,vue.js,vue-component,vue-router,Javascript,Vue.js,Vue Component,Vue Router,这是我的路线代码: // export so we can use in components export var router = new VueRouter(); // define routes router.map({ 'home': { component: Home, auth: true }, 'login': { component: Login, auth: false } })

这是我的路线代码:

// export so we can use in components
export var router = new VueRouter();

// define routes
router.map({
    'home': {
        component: Home,
        auth: true
    },
    'login': {
        component: Login,
        auth: false
    }
});

// fallback route
router.redirect({
    '*': 'home'
});

router.beforeEach(function (transition) {
    console.log("here!");
    console.log("beforeeach auth.user.authenticated: "+auth.user.authenticated)
    if (transition.to.auth && !auth.user.authenticated) {
        // if route requres authentication i.e. auth:true in routes
        // and isn't authenticated
        transition.redirect('login');
    } else {
        transition.next();
    }
});
// expose the whole thing on element with 'app' as an id
router.start(App, '#app');
这是我的
auth/index.js

export default {
    user: {
        authenticated: false
    },

    login: function(context, creds, redirect) {
        this.user.authenticated=true;
        console.log("logged in!");
        router.go('/home');
    },

    logout: function() {
        this.user.authenticated=false;
        console.log("logout");
        router.go('/login');
    }
}
我的导航设备:

<template>
    <div class="top-nav-bar" v-if="user.authenticated">
     // other code here....
                   <ul class="notification user-drop-down">
                    <li><a href="#" @click="logout()">Logout</a></li>
                   </ul>
     // other code here ...
    </div>
</template>

<script>
    import auth from '../services/auth';

    export default {
        data: function () {
            return {
                user: auth.user
            }
        },
        methods: {
            logout: function () {
                auth.logout();
            }
        }
    }
</script>

//其他代码在这里。。。。
//其他代码在这里。。。 从“../services/auth”导入验证; 导出默认值{ 数据:函数(){ 返回{ 用户:auth.user } }, 方法:{ 注销:函数(){ auth.logout(); } } }
当我单击注销按钮时,它会重定向到
localhost:8080/#/主页
但是我的
auth.logout()
router.go('/login')
。所以它应该重定向到登录控制器

当我手动进入浏览器
localhost:8080/#/主页
然后正确重定向到/login页面。那么,为什么注销按钮停留在/home(我看到一个空页面,没有控制台错误!)

编辑:

我正在使用vue 1.0.7和vue路由器0.7.5

您的问题是

router.go
go方法接受整数作为参数(请参阅)

我想你真的想要一个

router.push({ path: "/login"})

我收到此错误是因为我使用了

因此,它将转到
#
url(这导致了回退路线),而不是调用
@单击
。
因此,我必须使用
@click.prevent
来防止锚定标记的这种默认行为:


  • 我正在使用vue 1和vue路由器0.7.5。刚刚更新了我的问题