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。刚刚更新了我的问题