CODEWITHSUNDEEP
vue.jsvuejs2vue-router
proximacentauri
proximacentauri

Reputation: 1879

vue-router redirect to default path issue

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?

Upvotes: 33

Views: 55090

Answers (4)

Raj
Raj

Reputation: 1294

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

Upvotes: 16

Harshan Morawaka
Harshan Morawaka

Reputation: 739

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
})

Upvotes: 2

Daniel Danielecki
Daniel Danielecki

Reputation: 10590

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;

Upvotes: 1

Adriano Resende
Adriano Resende

Reputation: 2619

Try this code:

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

Upvotes: 38

Related Questions