Как запретить nuxt-link обновлять браузер после смены маршрута?

У меня есть код ниже.

      <nuxt-link slot="title" to="/about" class="nav-link" role="button">
    <i class="fas fa-portrait d-lg-none"></i>
    <span class="nav-link-inner--text">About</span>
</nuxt-link>

Но проблема в том, что при переходе по ссылке происходит следующее:

  • Маршрут/путь в браузере меняется
  • Новая страница загружается и отображается ( без обновления страницы )
  • Браузер обновляет страницу ( такого быть не должно )

Как предотвратить перезагрузку страницы? Вы можете увидеть это поведение на этом веб-сайте Connex Cloud Switch (connexcs.com)

Я искал везде, но я не могу найти ничего, что решило бы мою проблему.

Мой файл nuxt.config:

      export default {
    // Target: https://go.nuxtjs.dev/config-target
    target: "static",
    
    /*// Set the appropriate host and port depending on the deployment environment
    server: {
        host: "uk1dev1.connexcs.net", // process.env.NODE_ENV !== "production" ? "uk1dev1.connexcs.net" : "ww2.connexcs.com",
        port: 8080// process.env.NODE_ENV !== "production" ? 8080 : 0
    },*/

    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: "My app title",
        htmlAttrs: { lang: "en" },
        meta: [
            { charset: "utf-8" },
            { "http-equip": "X-UA-Compatible", content:"IE=edge" },
            { name: "viewport", content: "width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=1, shrink-to-fit=no" },
            { hid: "description", name: "description", content: "Connex Cloud Switch" }
        ],
        link: [
            { rel: "icon", type: "image/x-icon", href: "img/brand/connexcs.ico" },
            { rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" },
            { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" },
            { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" }
        ],
        script: [
            { src: "/js/crisp/index.js" },
            { src: "https://code.jquery.com/jquery-1.11.0.min.js" },
            { src: "https://code.jquery.com/jquery-migrate-1.2.1.min.js" },
            { src: "https://assets.pinterest.com/js/pinit.js" },
            { src: "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" },
            { src: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" }
        ]
    },

    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        { src: "~/plugins/argon/argon-kit.js" },
        { src: "~/plugins/mixins" }
    ],

    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,

    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: ["@nuxtjs/composition-api/module"],

    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
        // https://go.nuxtjs.dev/bootstrap
        "bootstrap-vue/nuxt",
        // https://content.nuxtjs.org/
        "@nuxt/content"
    ],

    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        transpile: [/echarts/, /zrender/, 'vue-echarts', 'resize-detector']
    }
}

0 ответов

Другие вопросы по тегам