Router navigate to another instance

Question

I have 2 Vue instances, one for the frontend and one for the admin side of things.

With this, I have 2 different routers which hold the different routes for navigating throughout the 2 Vue instances.

I'm wondering, if I have a centralised login, which sits within the frontend application, how do I go about navigating to the admin side once authenticated? I have tried the following methods:

@click="$router.push('/admin')"

import router from '../router';

export default {
    methods: {
        navigateToAdmin() {
            router.go('/admin'); // also tried router.push('/admin');
        }
    }
}

Both of these seem to do the same thing and push the url to the browser but they don't actually change the page, which is why I was wondering if it was possible to do this in a SPA.

Thanks in advance.

Answer 1

You can't use an unknown route with <router-link> or router.push because the router will fail to resolve it (since that route is not configured in the router).

You should use a regular link

Answer 2

If you want to route to /admin page a user after login, you can try this:

@click="navigateToAdmin()"

navigateToAdmin() {
        // if login success
        this.$router.push('/admin'); // automatically routes to admin page
    }

---

If you going to /admin page manually;