Redirecting from a method in Vue.js with a Vue router older than version 1.xx

Question

I am not an interface developer, but I know enough javascript to make a minimum.

I am trying to connect to the last part of the login, but my components are vue:

"vue-resource": "^0.9.3", "vue-router": "^0.7.13" 

I'm not experienced enough to upgrade to v1 or v2 respectively. I would like to achieve something similar to this .

However, I am not getting a successful redirect.

my app.js file:

 var router = new VueRouter(); ... import Auth from './services/auth.js'; router.beforeEach(transition => { if(transition.to.auth &&!Auth.authenticated) { transition.redirect('/login'); } else { transition.next(); } }); ``` In my login.js file ``` methods: { /** * Login the user */ login(e) { e.preventDefault(); this.form.startProcessing(); var vm = this; this.$http.post('/api/authenticate', { email : this.form.email, password : this.form.password }) .then(function(response){ vm.form.finishProcessing(); localStorage.setItem('token', response.data.token); vm.$dispatch('authenticateUser'); }, function(response) { if(response.status == 401) { let error = {'password': ['Email/Password do not match']}; vm.form.setErrors(error); }else{ vm.form.setErrors(response.data); } }); } } 

I tried to do as suggested:

 vm.form.finishProcessing(); localStorage.setItem('token', response.data.token); vm.$dispatch('authenticateUser'); vm.$route.router.go('/dashboard'); 

However, all he did was add the url on top. I see that the 3 previous events were successful, but not redirected.

this happened: http://dev.homestead.app:8000/login#!/ at http://dev.homestead.app:8000/login#!/dashboard

when i need the whole page to go to: http://dev.homestead.app:8000/login/dashboard#1/

I think I have a missing concept to redirect correctly.

UPDATE

As suggested, I added param: append => false , but nothing happens.

what I did after that was in app.js, create the redirectLogin () method with the console.log () outputs - which worked. what I did next, I put vm.$route.router.go and called the method through vm.$dispatch('redirectLogin'); , and that didn't work either.

Note

HTML is first created in Laravel. the route that I originally had (and worked) as a login / dashboard, and this route is accessible through the usual Laravel route. the blade is rendered using a presentation template.

While I'm trying to redirect redirection to login / dashboard (doesn't work), maybe I need to somehow remove login/dashboard and use route.map and assign login/dashboard ?

I would rather keep login/dashboard as a laravel route due to authentication and other manipulations.

Answer 1

For Vue 2

this.$router.push('/path')

Answer 2

Like par documentation , router.go adds the path to the current route, however in your case it is added along with # in the router.

You can use param: append to directly reach the desired destination, for example:

 vm.$route.router.go({name: '/login/dashboard#1/', params: {append: false}}) 

---

Edited

If this does not happen, you can try the $window.location method, as shown below:

 var url = "http://" + $window.location.host + "login/dashboard"; console..log(url); $window.location.href = url; 

Answer 3

I think this is a misunderstanding of how vue-router works. It seems that you do not want to load the new route with the appropriate component, but just want to redirect to a new page, and then load this page and, in turn, start a new instance of vue.

If this is correct, you do not need vue-router at all. Just add below when you need to load the page:

 window.location.href = '/login/dashboard' 

If you prefer to simulate a redirect to this page (there is no history with a back button), then:

 window.location.replace('/login/dashboard') 

EDIT

The above will be released when you finish all the processing that the page must complete in order to set the user state that the next page requires. Thus, the next page can capture it and should be able to report the correct state of the user (registered).

Therefore, you will want to start the redirection when the promise is resolved:

 .then(function(response){ vm.form.finishProcessing() // store the Auth token localStorage.setItem('token', response.data.token) // not sure whether this is required as this page, and in turn this instance of vue, is about to be redirected vm.$dispatch('authenticateUser') // redirect the user to their dashboard where I assume you'd run this.$dispatch('authenticateUser') again to get their state window.location.replace('/login/dashboard')