Redirect from method in Vue.js with Vue-router older than version 1.x.x

Question

I'm not much of a frontend developer but I know enough javascript to do the minimum.

I'm trying to plug into a last piece of login however my vue components are:

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

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

However I'm 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 it did was append the url on top. I see that the 3 previous events were successfully done but not the redirect.

it went from: http://dev.homestead.app:8000/login#!/ to http://dev.homestead.app:8000/login#!/dashboard

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

I think i have a missing concept in order to do the redirect correctly.

UPDATE

As per suggested i have added param: append => false but nothing happens.

what i did afterward was within app.js create a method called redirectLogin() with console.log() outputs - that worked. what i did further is i put vm.$route.router.go inside there and called the method via vm.$dispatch('redirectLogin'); and that also didn't work.

NOTE:

The HTML is being rendered in Laravel first. the route I originally had (and working) as login/dashboard and that route is available via normal Laravel route. the blade is being rendered via view template.

So far I've been trying to vue redirect over to login/dashboard (not working) perhaps I should somehow remove login/dashboard and use the route.map and assign login/dashboard?

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

Answer 1

For Vue 2

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