CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
user9945420
user9945420

Reputation:

Redirect on startup by the given browser URL

I created a new Vue app with a base path. Due to the fact the app is embedded into another Vue app, this app doesn't render the router-view on startup. If you want to know more about how or why this app is embedded into another app, please have a look here:

mount Vue apps into container of main Vue app

and my own answer to this problem:

https://stackoverflow.com/a/58265830/9945420

When starting my application, it renders everything except the router-view. I want to redirect on startup by the given browser URL. This is my router config:

import Vue from 'vue';
import Router from 'vue-router';

import One from './views/One.vue';
import Two from './views/Two.vue';

Vue.use(Router);

const router = new Router({
    base: '/my-embedded-app/',
    mode: 'history',
    routes: [
        {
            path: '/',
            component: One,
        },
        {
            path: '/two',
            component: Two,
        },
    ],
});

router.replace(router.currentRoute.fullPath);

export default router;

I want the app to render the component Two when calling .../my-embedded-app/two. Unfortunately, router.replace always redirects to / (so the browser URL is .../my-embedded-app/). I debugged the router, and saw that the path is /, but I would expect it to be /two.

Important note: I don't want to redirect the user to /two whenever the url is /. I just want to render the view Two when the url is /two. Currently it doesn't.

What might be wrong? Maybe I don't even need that redirect, and can solve the problem a more elegant way.

Upvotes: 7

Views: 1416

Answers (4)

Muhammad Elbadawy
Muhammad Elbadawy

Reputation: 341

That's the normal behavior, it is the way single page application works. The "pound" - like # - sign means that the links will not move the application to another page.

so you can change the router mode to 

mode:"hash"

Upvotes: 1

victor-gabou
victor-gabou

Reputation: 61

Could you provide a github repo or some to test the actual?

Otherwise my first idea is to use children routes with an "empty" view as base, here an example about what I tried. (working in my case)

router.js

export default new Router({
    mode: 'history',
    base: '/my-embedded-app/',
    routes: [
      {
        path: '/',
        name: 'base',
        component: Base,
        children: [
          {
            path: '',
            name: 'one',
            component: One
          },
          {
            path: 'two',
            name: 'two',
            component: Two
          }
        ]
      }
    ]
})

Base.vue

<template>
    <router-view/>
</template>

One.vue

<template>
  <div>One</div>
</template>

Two.vue

<template>
  <div>Two</div>
</template>

Upvotes: 0

Rajeev Radhakrishnan
Rajeev Radhakrishnan

Reputation: 1004

Try beforeEnter. Have a look at the below code:

const router = new Router({
  base: "/my-embedded-app/",
  mode: "history",
  routes: [
    {
      path: "/",
      component: One,
      beforeEnter: (to, from, next) => {
        // Your are free to add whatever logic here.
        // On first visit
        next("/two");
      }
    },
    {
      path: "/two",
      component: Two
    }
  ]
});

Read more about Navigation guards here

Upvotes: 0

VariableVasasMT
VariableVasasMT

Reputation: 174

updated: jsfiddle

What wound up happening is that route.currentRoute.fullPath was executed before router was ready.

Upvotes: 1

Related Questions