vue-router redirect to default path issue

Question

I want to default to a specific page when user navigates to the root path ie when used goes to myapp.com I want to redirect them to myapp.com/defaultpage

My current code is

index.js

import Full from '../containers/Full'
import DefaultView from '../views/DefaultView'

export default new Router({
  mode: 'history',
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: '/',
      redirect: '/defaultview',
      name: 'home',
      component: Full,
      children: [
        {
          path: '/defaultview',
          name: 'defaultview',
          component: DefaultView
        },
        {
          path: '*',
          component: NotFoundComponent
        }
    }
]})

As it is when user goes to myapp.com I get a '404 page not found' - ie the NotFoundComponent. Only when I type in myapp.com/defaultview can I get to the correct page.

Any ideas?

I tried, still same 404, I also tried removing the / from root ie redirect: 'defaultview'. Also 404. Only way I can get to my page is via myapp.com/defaultview — proximacentauri
– proximacentauri, Commented May 19, 2017 at 3:50

The.Bear · Accepted Answer · 2018-01-16 01:36:12Z

38

Try this code:

routes: [
    {
      path: '/',
      redirect: '/defaultview'
    },
    {
      path: '/defaultview',
      name: 'defaultview',
      component: DefaultView
    },
    {
      path: '*',
      component: NotFoundComponent
    }
]

edited Jan 16, 2018 at 1:36

The.Bear

5,8952 gold badges31 silver badges34 bronze badges

answered May 19, 2017 at 3:02

Adriano Resende

2,6291 gold badge31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

proximacentauri Over a year ago

Thanks, however I need to keep the Full component for the root path as it is the base for all other components to sit in. If I add that back then basically is the same as what I have above.

proximacentauri Over a year ago

One hack that works but wont work for more than one page where I need to redirect to is: { path: '*', component: DefaultView }

Billal BEGUERADJ Over a year ago

Very useful information. Thank you for sharing. I wonder if you experienced Nuxt.js and did the same thing with it? In the past I asked this same question but with Nuxt.js, when no one answered me for several weeks, I deleted my question.

Adriano Resende Over a year ago

@BillalBegueradj With Nuxt.js you need module as router-module (github.com/nuxt-community/router-module)

Raj · Accepted Answer · 2022-04-23 05:03:23Z

16

When using children remove url prefix of the parent

ex: change "/defaultview" to defaultview remove the parent path component, so the actual code should be like this

routes: [
    {
      path: '/',
      redirect: '/defaultview',
      name: 'home',
      component: Full,
      children: [
        {
          path: 'defaultview', /* changed */
          name: 'defaultview',
          component: DefaultView
        },
        {
          path: '*',
          component: NotFoundComponent
        }
      ]
    }
];

reference Nested Routes

edited Apr 23, 2022 at 5:03

answered May 2, 2019 at 6:40

Raj

1,31414 silver badges18 bronze badges

Comments

Harshan Morawaka · Accepted Answer · 2020-03-19 02:47:13Z

This way is works for me

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '../components/home/container';
import LiveAgent from '../components/live_agent/container';
import Bot from '../components/bot/container';
import User from '../components/user/container';

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        component: Home,
        name: 'home',
        path: '/home'
    },
    {
        component: LiveAgent,
        name: 'live_agent',
        path: '/live_agent'
    },
    {
        component: Bot,
        name: 'bot',
        path: '/bot'
    },
    {
        component: User,
        name: 'user',
        path: '/user'
    }
];

export default new VueRouter({
    routes // short for routes: routes
})

Daniel Danielecki · Accepted Answer · 2019-09-25 12:32:08Z

1

You can do it using 1 line of code, i.e. by adding router.replace("myPath");. Full code:

import Vue from "vue";
import Router from "vue-router";
import MyComponent from "./my-component";

Vue.use(Router);

const routes = [
  { path: "/myPath", name: "myPath", component: MyComponent }
];

const router = new Router({
  mode: "history", // Remove the hash from the URL, optional.
  routes
});

router.replace("myPath");

export default router;

answered Sep 25, 2019 at 12:32

Daniel Danielecki

10.9k7 gold badges89 silver badges111 bronze badges

Collectives™ on Stack Overflow

vue-router redirect to default path issue

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related