vue.js - Vue router lazy loading not rendering - Stack Overflow

admin管理员组

文章数量:1355535

I'm trying to convert a react project to vue, for educational purposes only. Instead of using RouterLink, I used a regular anchor like:

<li><a href='#' @click="handleNavMenu('/URL')">Link 1</a></li>

I'm testing lazy loading and this aproach didn't work. I read lot of posts about similar problem but none of them seems to repeat this similar behavior.

At the end, my solution for this was to add prevent to click event:

<li><a href='#' @click.prevent="handleNavMenu('/URL')">Link 1</a></li>

As I couldn't find anything about this on documentation, I would like to know if it something I missed.

here goes a complete code:

route.js

const routes = [
  {
  path: '/',
  name: 'home',
  component: HomeView,
},
{
  path: '/avaliacao-emp',
  name: 'avaliacaoEmp',
  // route level code-splitting
  // this generates a separate chunk (About.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: ()=> import('../views/avaliacao-emp/index.vue'),
},];

App.vue

const router = useRouter();

const handleNavMenu = async (url) => {
  const failure = await router.push(url)
  
  console.log(failure)
}

<template>
<li><a href='#' @click.prevent="handleNavMenu('/URL')">Link 1</a></li>
</template>

Dependencies:

"dependencies": {
    "pinia": "^3.0.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "prettier": "3.5.3",
    "sass-embedded": "^1.86.0",
    "vite": "^6.2.1",
    "vite-plugin-vue-devtools": "^7.7.2"
  }

本文标签： vuejsVue router lazy loading not renderingStack Overflow