Closed dgleba closed 1 year ago
I am trying to use vue router and I get the error in the title. Can someone help?
main.js:10 Uncaught ReferenceError: hello is not defined at main.js:10:28
line 10: { path: '/h', component: hello, name: 'hello'},
main.js
Vue.use(httpVueLoader); httpVueLoader.register(Vue, 'hello.vue'); var Home = Vue.extend({ template: '#home' }); const routes = [ { path: '/', component: Home}, { path: '/h', component: hello, name: 'hello'}, ] const router = new VueRouter({ routes // short for `routes: routes` }); var app = new Vue({ router, el: '#app', // components: { // 'hello': window.httpVueLoader('./hello.vue'), // }, data: function () { return { activeUser: 'aba', state: "" }; }, }); app.use(router); app.mount('#app');
hello.vue
<template id="hello"> <div > <div> <hr/> This is hello.vue component </div> </div> </template> <script> export default { name: "hello", template: '#hello', data() { return { state01: "" }; } }; </script>
index.html
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Vcdn5</title> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.6.2/vue-router.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.22.0/bootstrap-vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.3.5"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script type="module" src="./src/main.js"></script> </head> <body> <!-- ================================================= --> <main id="app"> <div> <b-navbar toggleable="md" type="dark" variant="dark"> <b-navbar-toggle target="nav_collapse"></b-navbar-toggle> <b-navbar-brand to="/">Vuecdn5</b-navbar-brand> <b-collapse is-nav id="nav_collapse"> <b-navbar-nav> <b-nav-item to="/">Home</b-nav-item> <b-nav-item to="/h">hello</b-nav-item> </b-navbar-nav> </b-collapse> </b-navbar> <!-- routes will be rendered here --> <router-view /> </div> <!-- <hello></hello> --> </main> <!-- ================================================= --> <template id="home"> <div>Home view</div> </template> <!-- ================================================= --> </body> </html>
I found vue2 implementation example. It works.
ref: vue-router works properly with vue3-sfc-loader. Here an example for vue2 :
vue-router works properly with vue3-sfc-loader. Here an example for vue2 :
I am trying to use vue router and I get the error in the title. Can someone help?
line 10: { path: '/h', component: hello, name: 'hello'},
main.js
hello.vue
index.html