vuejs3 - Vue 3 Router not displaying the path in the browser - Stack Overflow

admin管理员组

文章数量:1297037

I am migrating from Vue2 to Vue3. The router seems to work properly in the sense that I am being redirected to the correct components, but the url in the browser window does not update i.e. I am in component with path /home but the browser shows /, I am in the component with path /table and my browser still shows /.

My router file has:

const router = new createRouter({
  history: createMemoryHistory(),
  routes: [
{ path: '/home', name: 'home-page', component: HomePage, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/sensitivePart', name: 'sensitive-part-page', component: SensitivePart, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/rmer', name: 'rmer-page', component: RMER, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/rmerClosedOrder', name: 'rmer-closed-order-page', component: RmerClosedOrder, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/mers', name: 'mers-page', component: MERS, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/mersHistory', name: 'mers-history-page', component: MERSHistory, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/databaseProfileKeyword', name: 'database-profile-keyword-page', component: DatabaseProfileKeyword, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/catsSensitivePartTracking', name: 'sens-part-trac', component: SensitivePartTrackingPage, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/catsSensitivePartTrackingHistory', name: 'sens-part-trac-hist', component: SensitivePartTrackingHistoryPage, beforeEnter: jwtMicroservices.validateJwtToken },    
{ path: '/', name: 'login-page', component: LoginPage},
  ]
});

And in the the main.js

const app = createApp(App);
app.use(CarbonVue3);
app.use(router);
app.mount('#app');

The images show to different components: /sensitivePart and /rmer but the browser shows / on both. This happens to all paths.

/sensitivePart

/rmer

I am migrating from Vue2 to Vue3. The router seems to work properly in the sense that I am being redirected to the correct components, but the url in the browser window does not update i.e. I am in component with path /home but the browser shows /, I am in the component with path /table and my browser still shows /.

My router file has:

const router = new createRouter({
  history: createMemoryHistory(),
  routes: [
{ path: '/home', name: 'home-page', component: HomePage, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/sensitivePart', name: 'sensitive-part-page', component: SensitivePart, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/rmer', name: 'rmer-page', component: RMER, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/rmerClosedOrder', name: 'rmer-closed-order-page', component: RmerClosedOrder, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/mers', name: 'mers-page', component: MERS, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/mersHistory', name: 'mers-history-page', component: MERSHistory, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/databaseProfileKeyword', name: 'database-profile-keyword-page', component: DatabaseProfileKeyword, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/catsSensitivePartTracking', name: 'sens-part-trac', component: SensitivePartTrackingPage, beforeEnter: jwtMicroservices.validateJwtToken },
{ path: '/catsSensitivePartTrackingHistory', name: 'sens-part-trac-hist', component: SensitivePartTrackingHistoryPage, beforeEnter: jwtMicroservices.validateJwtToken },    
{ path: '/', name: 'login-page', component: LoginPage},
  ]
});

And in the the main.js

const app = createApp(App);
app.use(CarbonVue3);
app.use(router);
app.mount('#app');

The images show to different components: /sensitivePart and /rmer but the browser shows / on both. This happens to all paths.

/sensitivePart

/rmer

• vuejs3
• vue-router
• router

Share Improve this question Follow asked Feb 11 at 16:14 KalioKalio 2122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This was solved by changing the history param from the router to:

history: createWebHistory()

Couldn't find documentation on the difference for this, just started trying different stuff.

本文标签： vuejs3Vue 3 Router not displaying the path in the browserStack Overflow