Vue-router не изменяет url страницы при нажатии RouterLink. Содержимое меняется. В чем может быть проблема?

Question

[kflipper]

В данный момент активный route - /notes

Рендерится соответствующий компонент, но урл не изменился:

Header.vue

<template>
    <header class="header">
        <div class="container">
            <div class="header_inner">
                <nav class="header_nav">
                    <RouterLink to="/">Home</RouterLink>
                    <RouterLink to="/calculator">Calculator</RouterLink>
                    <RouterLink to="/notes">Notes</RouterLink>
                </nav>
            </div>
        </div>
    </header>
</template>

App.vue

<template>
    <Header />
    <RouterView :key="$route.fullPath"/>
</template>

<script>
import { RouterView } from 'vue-router'
import Header from '@/components/layout/Header.vue';

export default {
    name: 'App',
    components: {
        "Header": Header
    }
}
</script>

main.ts

import '@/assets/base.css'
import 'primevue/resources/themes/aura-light-green/theme.css'

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import { router } from '@/router/index'

import App from '@/App.vue'

createApp(App).use(router).use(PrimeVue).mount('#app')

routes.ts

import { createMemoryHistory, createRouter } from 'vue-router'

import NotesPage from '@/pages/notes/NotesPage.vue'
import HomePage from '@/pages/home/HomePage.vue'
import CalculatorPage from '@/pages/calculator/CalculatorPage.vue'

const routes = [
    { path: '/', component: HomePage },
    { path: '/notes', component: NotesPage },
    { path: '/calculator', component: CalculatorPage }
]

export const router = createRouter({
    history: createMemoryHistory(),
    routes
})

Answer 1

[0xD34F]

history: createMemoryHistory(),

Vue-router не изменяет url страницы

А должен? Лично я слышал, что нет:

The memory history mode doesn't assume a browser environment and therefore doesn't interact with the URL

Answer 2

[Good6roger]

Проблема, вероятно, связана с тем, что вы используете createMemoryHistory() для создания истории маршрутов. Это означает, что история маршрутов хранится в памяти, а не в адресной строке браузера.

Чтобы исправить это, вам нужно использовать createWebHistory() вместо createMemoryHistory(). Это обеспечит синхронизацию URL-адреса в адресной строке браузера с текущим маршрутом.

Попробуйте заменить createMemoryHistory() на createWebHistory() в routes.ts