Note: This code is intended for private use only and may contain bugs
I am developing a component loader without using webpack or similar tools.
My issue lies with the getComponents() function, which successfully returns HTML code as a string. However, when I navigate to /userlists, the router does not display anything. Surprisingly, the route / works just fine. Can anyone help me identify my mistake?
Loader:
const getComponent = name => {
return document.getElementsByClassName('component '+name)[0].outerHTML
}
const mainComponent = {
template: '<h3>Hand mailer<p>)</p></h3>'
}
const userLists = {
template: getComponent('userslist')
}
Component:
<div class="component userlists">
<p>
Hello vue!
</p>
</div>
Router:
const router = new VueRouter({
hashbang: true,
routes: [
{
path: '/',
component: mainComponent
},
{
path: '/userlists',
component: userLists
}
]
})