0

I have the code below.

<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>

But the problem is that when the link is clicked, the following takes place:

  • The route/path in the browser changes
  • The new page is loaded and displayed (without refreshing the page)
  • The browser refreshes the page (this should not happen)

How do I prevent the page from reloading? You can see this behavior on this website Connex Cloud Switch (connexcs.com)

I have searched everywhere but I can't find anything that has solved my problem.

My nuxt.config file:

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']
    }
}
Cacious
  • 137
  • 1
  • 14
  • There is probably something somewhere (like a middleware or a module) which is doing that. The code show should be okay, even tho I'm not sure what `slot="title"` is doing. Could you please share your `nuxt.config.js` file? – kissu Mar 16 '22 at 11:15
  • @kissu I have updated the question with my nuxt.config file – Cacious Mar 16 '22 at 12:40
  • Some middlewares? – kissu Mar 16 '22 at 12:41
  • There are no middlewares that I am aware of. – Cacious Mar 16 '22 at 12:43
  • What about (global) mixins or even your `package.json`? – kissu Mar 16 '22 at 12:48
  • I am checking the global mixins now and I Have just checked my package.json. It is clean. There no special config or scripts apart from the usual – Cacious Mar 16 '22 at 12:59
  • Not sure how I can help if everything looks clean. Try a brand new page with just a Nuxt link and use the `name` object rather than the `path` one. – kissu Mar 16 '22 at 13:42
  • The problem was in a global mixin. I used the following code to run a function when the page changed, but it ended up causing a page refresh. How can fix this code to avoid the refresh, ` onPageUrl (func){ if(!window.history) return const history = window.history var pushState = history.pushState history.pushState = function(state) { // YOUR CUSTOM HOOK / FUNCTION func() return pushState.apply(history, arguments) } } ` – Cacious Mar 16 '22 at 14:21
  • Not sure what you're trying to do with this code. Especially since you can use a middleware to run a function between page navigation. On top of that, you don't use `history` in a SPA context where you do have a vue router. – kissu Mar 16 '22 at 14:28
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242992/discussion-between-cacious-and-kissu). – Cacious Mar 16 '22 at 16:12

0 Answers0