Seguinte, o Vue trabalha com forte encapsulamento de componentes.
Primeiramente, isso evita que você acidentalmente chame um evento ou variável aonde você não quer chamar. Também mantém os componentes perfeitamente isolados um dos outros. Com o vue-router não é diferente. Ele encapsula o VueRouter pra que ele não fique disponível globalmente e, ao você usar algum método, ele não acabe disparando por debaixo dos panos.
Seguinte: Para fazer o que você quer funcionar, temos que fazer do VueRouter um componente global. A maneira que encontrei de fazer isso foi colocando o router na definição de Vue. Assim, o Router fica disponível quando eu chamar Vue.router.
Altere seu main.js para o seguinte:
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource';
import router from './routes';
Vue.use(VueResource);
Vue.router = router
new Vue({
el: '#app',
router,
render: h => h(App)
})
Agora, a gente vai definir o New VueRouter dentro do componente de rotas. Ent'ao no seu arquivo routes.js, você faz o seguinte:
import Login from '../src/components/login/Login.vue';
import Home from '../src/components/home/Home.vue';
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', component: Login, redirect: '/login' },
{ path: '/home', name: 'home', component : Home, titulo : 'Home' },
{ path: '/login', name: 'login', component : Login, titulo : 'Login' }
]
});
export default router;
O que fazemos aqui é exportar o router como default para a definição das rotas como um todo ficar disponível
Agora dentro do SegurancaService.js
import Vue from 'vue'
import VueRouter from 'vue-router'
export default class SegurancaService {
// Construtor da Classe
constructor(VueRouter){
console.log('Entro no construtor da class SegurancaService');
};
// Chamo para expulsar user
// Assim funciona porem no meu codigo de produção não tenho certeza que vou semtre chamar
// esse metodo dentro de um componente aonde tenho um this.$router
/*ExitUser (router) {
router.push({ name: 'login' });
};*/
ExitUser () {
Vue.router.push({ name: 'login' });
};
}
Voce consegue chamar o Vue.router sem passar nenhum parâmetro
Então, no seu arquivo Home.vue você pode usar assim:
<script>
import SegurancaService from '../../domain/seguranca/SegurancaService'
export default {
data() {
return {
contador: 0,
serice: new SegurancaService()
};
},
methods: {
sair(){
//this.serice.ExitUser(this.$router);
//assim funciona
//this.$router.push({ name: 'login' });
this.serice.ExitUser();
},
verifica(){
this.contador++;
if (this.contador >= 5){
// devo expulsar o user de dentro do sistema
// this.$router.push({ name: 'login' });
this.serice.ExitUser();
// this.serice.ExitUser();
}
}
},
};
</script>
