[PROMOÇÃO] Assine com + 30% de desconto ANUAL MENSAL (últimas horas)
Rafael Lannes
Criador Rafael Lannes 08/06/2020

Quando coloco o router-view  dentro do App.vue, dá erro:

app.js:37780 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? 

 Não consegui identificar onde está o erro, pois quando coloco algum html ele encontra o componente e renderiza normal... é algo nas rotas, certo? está assim o arquivo:

import Vue from 'Vue'

import VueRouter from 'vue-router'

import AtendimentosComponent from '../components/admin/pages/atendimentos/AtendimentosComponent'

 Vue.use(VueRouter)

 const routes = [

    { path: '/atendimentos', component: AtendimentosComponent, name: 'atendimentos' }

 ]

 const router = new VueRouter({

    routes

})

 export default router

 

Manager Carlos Ferreira 08/06/2020

Olá Rafael!
Tudo bem?

A configuração de rota está correta.

Você tem esse projeto no GitHub? Eu gostaria de dá uma olhada geral para identificar onde errou.

Carlos Ferreira
Criador Rafael Lannes 08/06/2020

O que eu reparei é que quando coloco tudo dentro do app.js funciona o roteamento... to perdidaço

Rafael Lannes
Criador Rafael Lannes 08/06/2020

Opa, carlos... é um projeto em andamento de um cliente que possui alguns dados delicados, acho que não vou conseguir compartilhar o git. Estou seguindo o curso de laravel com vue pra organizar uma dashboard. 

Dessa forma, funciona: 

require('./bootstrap');

window.Vue = require('vue');

 

import store from './vuex/store'

import { TinkerComponent } from 'botman-tinker';

import AtendimentosComponent from '../js/components/admin/pages/atendimentos/AtendimentosComponent'

 

Vue.component('botman-tinker', TinkerComponent);

Vue.component('test-component', require('./components/TestComponent'));

Vue.component('app-component', require('./components/App'));

 

import VueRouter from 'vue-router'

  

Vue.use(VueRouter)

   

const routes = [

    { path: '/atendimentos', component: AtendimentosComponent, name: 'atendimentos' }

]

 const router = new VueRouter({

  routes 

})

 const app = new Vue({

  router

}).$mount('#app')

___

 

 

Rafael Lannes
Criador Rafael Lannes 08/06/2020

Eu só copiei o codigo do router e joguei dentro do app.js e e corrigi os imports... funcionou sem problema

Rafael Lannes
Manager Carlos Ferreira 08/06/2020

Eu queria ver o código no GitHub, porque quero ver como importou.

Deve importar assim no app.js:
import router from './routes/router'

Carlos Ferreira
Criador Rafael Lannes 08/06/2020

Está assim mesmo... coloquei as partes do JS zipadas... consegue dar uma olhada, por favor?

https://drive.google.com/file/d/1eqxr-sFjDKwJzUA-FKadi_3dfhT0wFzs/view

Eu consegui fazer funcionar assim:

app.js

require('./bootstrap');

window.Vue = require('vue');

 

import router from './routes/router'

 

import store from './vuex/store'

import { TinkerComponent } from 'botman-tinker';

import VueRouter from 'vue-router'

 

Vue.use(VueRouter)

 

Vue.component('botman-tinker', TinkerComponent);

Vue.component('test-component', require('./components/TestComponent'));

Vue.component('app-component', require('./components/App'));

 

 

const app = new Vue({

    el: '#app',

    router,

    store

  })

_________________________

router.js

 

import VueRouter from 'vue-router'

 

import AtendimentosComponent from '../components/admin/pages/atendimentos/AtendimentosComponent'

 

const routes = [

    { path: '/atendimentos', component: AtendimentosComponent, name: 'atendimentos' }

 

]

 

export default new VueRouter({

    routes

});

 

Rafael Lannes
Criador Rafael Lannes 08/06/2020

Porém, dessa maneira, também é preciso importar o VueRouter dentro do app.js. que fica diferente do curso....

 

alguns artigos ensinam a fazer desse modo e foi o unico jeito que consegui fazer rodar sem erros

https://medium.com/@piethein/how-to-combine-vuejs-router-with-laravel-1226acd73ab0

 

É incorreto dessa maneira?

 

Rafael Lannes
Criador Rafael Lannes 08/06/2020

Já encontrei o problema.... 

tava na primeira linha do router.js, eu estava usando o 'V' em maisculo, complicado né... kkkkk

import Vue from 'vue'
Rafael Lannes
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!