Problem with vue-router, not render my components and no errors

Question

js and have a problem to use vue-router, my component isn't rendered and console show no errors, follow my code:

router config (/router/index.js):

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/pages/Home/Home.vue'
import NewUser from '@/pages/NewUser/NewUser.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/', component: Home.default },
    { path: '/NewUser', component: NewUser.default }
]

export default new VueRouter({
    routes
})

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import 'primevue/resources/themes/nova-light/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css'

import Vuelidate from 'vuelidate'
import Card from 'primevue/card'
import InputMask from 'primevue/inputmask'
import Button from 'primevue/button'
import Sidebar from 'primevue/sidebar'
import InputText from 'primevue/inputtext';
import Message from 'primevue/message';

Vue.config.productionTip = false


Vue.use(Vuelidate)
Vue.component('Card', Card)
Vue.component('InputMask', InputMask)
Vue.component('Button', Button)
Vue.component('Sidebar', Sidebar)
Vue.component('InputText', InputText)
Vue.component('Message', Message)

new Vue({
    router: router,
    render: h => h(App),
}).$mount('#app')

app.vue:

<template>
  <Fragment id="app">
      <Header />
          <router-view />
      <Footer />
  </Fragment>
</template>

<script src="./App.js"></script>
<style src="./App.css"></style>

my router-links is in header component, follow the github repository with the projetc:

https://github.com/juniorjrjl/weblib-front

thank you

[edited]

link removede because i solved part of problem and finally get error message

[edited]

I remove a link because not generate error in a link and I finally get error message after remove '.default' in my routes

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: 
"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node 
before which the new node is to be inserted is not a child of this 
node."

vue.runtime.esm.js?2b0e:1888 DOMException: Failed to execute 
'insertBefore' on 'Node': The node before which the new node is to be 
inserted is not a child of this node.
at HTMLBodyElement.n.insertBefore (webpack- 
internal:///./node_modules/vue-fragment/dist/vue- 
fragment.esm.js:5:1609)
at HTMLDivElement.e.insertBefore (webpack- 
internal:///./node_modules/vue-fragment/dist/vue- 
fragment.esm.js:5:1293)
at Object.insertBefore (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5699:14)
at insert (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6029:19)
at createComponent (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5976:9)
at createElm (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5915:9)
at updateChildren (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6206:11)
at patchVnode (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6309:29)
at VueComponent.patch [as __patch__] (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6472:9)
at VueComponent.Vue._update (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:3942:19)

I shared my study project in a link, You prefer I create a another exempla more simple? — Jose Luiz Junior
– Jose Luiz Junior, Commented Apr 24, 2020 at 13:05
To run your project link, I would have to clone and then install all the dependencies and there is still a chance that I might not face the problem you mentioned. Better is to create a working example like codesandbox. stackoverflow.com/help/minimal-reproducible-example — Utsav Patel
– Utsav Patel, Commented Apr 24, 2020 at 13:08

Utsav Patel · Accepted Answer · 2020-04-24 15:56:56Z

1

If you need to have a fallback route when the path does not match any component then do this.

const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const NotFound = { template: "<div>Page not found</div>" };

Vue.config.productionTip = false;

Vue.use(VueRouter);

const routes = [
  { path: "/NewUser", component: Bar },
  { path: "/", component: Foo },
  { path: "*", component: NotFound }
];

Working implementation attached.

If you want to create nested router-views then read on it here:
https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views

answered Apr 24, 2020 at 15:56

Utsav Patel

2,9171 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jose Luiz Junior Over a year ago

I solved part of problem, I remov '.default' in my routes (component property), but get another problem, please look at my comment in shmallen post.

Utsav Patel Over a year ago

@JoseLuizJunior i do not see the error in the codesandbox I provided. can you check that?

Jose Luiz Junior Over a year ago

Sorry to leave this question wihout some feedback, I solved my problem after I remove a vue-fragment from my project and replace to div my routes starts to work fine

shmallen · Accepted Answer · 2020-04-24 13:20:09Z

0

Changing your route did the trick for me. For default routing the syntax is different (see more https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views)

const routes = [
    { path: '/', component: Home },
    { path: '/NewUser', component: NewUser }
]

answered Apr 24, 2020 at 13:20

shmallen

134 bronze badges

1 Comment

Jose Luiz Junior Over a year ago

I remove a '.default' like your example and works to render a component, but when I try to navigate to another link I get a error: [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node." if I refresh a page the component is rendere, but when I try navigate again I get a error

Collectives™ on Stack Overflow

Problem with vue-router, not render my components and no errors

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related