Как запретить 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']
}
}