Redirect to specific url in case of wrong url in vuejs

Question

I have two separate routing files where I am importing the component and defining their routing in each of its file and using it in index.js file. Here are my files code:

//router1.js 
import Layout1 from 'Layouts/Panel.vue';

const Users = () => import('Views/Users.vue');
const Reports = () => import('Views/Reports.vue');

export default {
    path: '/layout1',
    component: Layout1,
    redirect:'/layout1/reports',
    children:[
       { 
            path: 'reports',  
            component: Reports, 
            name:'Reports'
        },
        { 
            path: 'users',  
            component: Users, 
            name:'Users'
        }
     ]
}

//router2.js
import Layout2 from 'Layout/Panel2';

const Demo1 = () => import('Views/Demo1');
const Demo2 = () => import('Views/Demo2');
export default {
    path: '/',
    component: Layout2,
    redirect:'/demo1',
    children:[
        { 
            path: '/demo1',
            component: Demo1
        },
        { 
            path: '/demo2',
            component: Demo2
        }
   ]
}
// index.js
import Vue from 'vue'
import Router from 'vue-router'

import router1 from './router1';
import router2 from './router2';
const NotFound = () => import('Views/NotFound.vue');
Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        router1,
        router2,
        { 
            path: '*',  
            component: NotFound, 
            name:'NotFound',
        },
    ]
})

Now, I want to redirect to specific url i.e "not-found" in case of wrong URL. In "NotFound" component I am adding below line of code in mounted lifecycle hook which redirects to URL "not-found".

this.$router.replace({ path: 'not-found' });

But if URL is having parameters or query string it will append to it. For e.g- http://localhost:8080/home/not-found What I want is that it only shows http://localhost:8080/not-found How should I achieve this. Please help. Thanks!

Why do you wan't to redirect? You can just have a normal 404 page without redirect. — Murwa
– Murwa, Commented Jul 10, 2019 at 6:24

kcsujeet · Accepted Answer · 2019-07-10 06:18:40Z

2

try this in your mounted function. worked on my side.

this.$router.push({path: '/not-found'})

answered Jul 10, 2019 at 6:18

kcsujeet

5512 silver badges12 bronze badges

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

1 Comment

Sukhpal Singh Over a year ago

I had already tried this also but at that time its not working. Now I have cleared the cache and then again reloaded it, it is working fine now. My bad. Thanks for your help.

Collectives™ on Stack Overflow

Redirect to specific url in case of wrong url in vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related