Vue router change the url after page reload

hi guys, hope u ok .
i have problem with vue router whene i reload page. the link “” become
like this .
i ask google but i don’t find any thing .
sorry for my english


const router = new Router({
mode: ‘history’,
base: process.env.VUE_APP_LINK,
routes: [
path: ‘/home’,
name: ‘home’,
component: Home,
children: [
path: ‘page1’,
name: ‘page1’,
component: () => import(’@/components/contents/page1.vue’),
path: ‘page2’,
name: ‘page2’,
component: () => import(’@/components/tools/page2.vue’),
path: ‘page3’,
name: ‘page3’,
component: () => import(’@/components/contents/page3.vue’),
path: ‘page4’,
name: ‘page4’,
component: () => import(’@/components/contents/page4.vue’),
path: ‘/login’,
name: ‘login’,
component: Login
path: ‘*’,
component: () => import(’@/components/contents/404.vue),

link in vue

<li class="nav-item"><router-link to="page1" class="nav-link">page1</router-link></li>
<li class="nav-item"><router-link to="page2" class="nav-link">page2</router-link></li>
<li class="nav-item"><router-link to="page3" class="nav-link">page3</router-link></li>
<li class="nav-item"><router-link to="page4" class="nav-link">page4</router-link></li>

Change the paths in the router to “/page1” instead of “page1”. Wouldn’t this work?

That would make them root urls, whereas OP wants them nested (I assume). e.g. only accessible as /home/page1.

@omar.omar The issue is in how you construct your router-links. Currently they are relative, so the url will change according to the current page. i.e. page1 will be added to the end of the url.

You need to construct them absolutely:

<li class="nav-item"><router-link to="/home/page1" class="nav-link">page1</router-link></li>

This way the link will always direct to /home/page1 no matter how nested your current url is.

1 Like

thank’s man <3

1 Like