Vue-router: How can I set a default route on page load

[Gacnt]

I'm trying to use vue-router with electron.js to make a desktop app, I currently have these routes

import Home from './views/Home/Home.vue';

export default [
  // Home Routes
  { path: '', name: 'home', component: Home },
  { path: '/', name: 'home', component: Home },
  { path: '*', redirect: '/' }


]

Currently when the program loads, window.location.pathname is something like /Users/name/appname/app/views/index.html' which doesn't match ANY of my paths, so I use a path: '*', redirect: '/' to send it to the home page on initial load.

I feel like there should be a better way to set a default route on initial load, is there nothing like

<router-view default="{name: 'home'}"></router-view> or something

[fnlctrl]

Hi, thanks for filling this issue. Default(fallback) route can already be set with { path: '*', redirect: '/' }, but I don't have any experience with electron, so I don't know why it's not working.
In this case, you need to programmically change the router state. Simply do router.replace(...your desired default route..) after creating the root instance:

const router = new VueRouter(...)
new Vue({router})
router.replace(...)

[akeating]

Apologies for commenting on an old issue, but oddly it's not easy to find much in the way of documentation on this. Consider the following code:

Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'Hello',
    component: Hello
  }]
})
router.replace({ path: '*', redirect: '/' })
export default router

Any path typed into the browser ends-up at /<path>, like so:
router.replace({ path: '*', redirect: '/' }) => /*
router.replace({ path: '/foo', redirect: '/' }) => /foo

Ordinarily I would consider this a bug, but since I'm in the early stages of evaluating vuejs, I'm likely missing something obvious. Again, apologies if this is not the appropriate place to bring up this issue.

vue 2.8.1

[fnlctrl]

@akeating Hi, thank you for your interest in this project. First of all, router.replace isn't for registering a redirection rule. It's simply a command to let router redirect to that route. Please refer to the docs here: http://router.vuejs.org/en/api/router-instance.html

As for your problem,

1. To set a fallback (catch-all) route, register a { path: '*', redirect: '/' } inside the routes array, as in the example
   https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js#L53-L54
   The example link can be found on the docs redirect-and-alias
2. To navigate to an initial route when the app loads, simply do something like

router.replace('/foo')
router.replace({name: 'foo', ...})

For further questions, please use gitter or forum or stackoverflow, thanks!

[akeating]

Huh, I totally misread this thread. Thank you for your prompt reply and clarification.

[adi518]

IIRC, replace is part of HTML 5 History API, so that's just an abstraction over that. Plus, I think it's a different behavior to push, so you have to be mindful of what you actually want the Router to do. It makes more sense to just declare your redirect.

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/hello-world'
    }
  ]
})

Which will trigger redirect on load. Declarative vs Empiric strikes again. ;)

[PierBover]

What if we want to redirect under some conditions?

If we do:

const router = new Router({...});
console.log(router.currentRoute.path)

We always get /, even if the browser is at /something/something. I presume because the URL in the browser hasn't been loaded yet.

This is problematic because if we want to do something like this:

router.replace({
    path: '/something-else',
    query: {
        redirect: router.currentRoute.path
    }
});

We can't really redirect to the proper path (since the actual path on the browser hasn't been loaded yet).

Edit:

If we do:

const router = new Router({...});
setTimeout(() => {
    console.log(router.currentRoute.path);
}, 0);

We can see the correct path in the console and not /.

This allows to create conditional redirects and such, but is an ugly solution.

[adi518]

@PierBover Because, that's a hacky-approach, which is limited. I'm not sure why @fnlctrl used it as an example. Perhaps because it's the shortest way to do a redirect.

Anyway, for your case you will need a navigation guard. The docs has it explained. Basically, there's a generic hook that gets called before every route change. In this hook, you can implement your business logic according to where the app should send the user next. You can also cancel the route change.

See: https://router.vuejs.org/guide/advanced/navigation-guards.html#navigation-guards

[PierBover]

Thanks @adi518 I know about beforeEach.

I was wondering if there was a better approach such as an event when the URL on the address bar of the browser actually becomes the currentRoute. That would be a better approach IMO than the generic beforeEach hook.

[fpilee]

the redirection takes a couples of seconds, the best is to edit the manifest.json file to point to / instead of index.html

[koshimicrosystem]

How to set default component to the vue-router

[sebastian-inman-design]

4 years later and I just ran into the exact same issue as you. What I ended up doing, since it's an Electron app and there aren't any instances where you'll run into a 404 issue, is just set my "Home" routes path as a catch-all:

export default {
  component: () => import('../pages/Index.vue'),
  beforeEnter: prefetch,
  name: 'index',
  path: '*'
}

Then in my actual router, I just placed my "Home" route as the last on in the routes array:

const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes: [
    workflows,
    index
  ]
})

Hopefully this helps out anyone looking into this recently.