I am very new to vue. I know that this one is easy with vue-cli but I need to learn this first without using the node.
I was making many template files and pages in different js files. Suddenly it hit my mind that what if a lot of file is requested and downloaded?
What I am trying to do is I am trying to fuse route and async component loading together for loading different pages when they are called.
Is there a way to do this? This is the code that I tried for my initial project.
<html>
<head>
<script src="vue.js"></script>
<script src="vue-route.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</div>
<script>
//axios.get("https://shohanlab.com")
const Home = { template: '<div>Home</div>' }
const AsyncComp =
() =>
new Promise((resolve, reject) => {
resolve({
template: About
})
})
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: AsyncComp },
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
const app =Vue.createApp({})
app.use(router)
app.mount('#app')
</script>
</body>
</html>
As we can see in the code that The About.js is called even before I call it. In this way the page size will be very big.