Rotas não funcionam
[Concluído]
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
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.
O que eu reparei é que quando coloco tudo dentro do app.js funciona o roteamento... to perdidaço
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')
___
Eu só copiei o codigo do router e joguei dentro do app.js e e corrigi os imports... funcionou sem problema
Eu queria ver o código no GitHub, porque quero ver como importou.
Deve importar assim no app.js:
import router from './routes/router'
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
});
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?
Já encontrei o problema....
tava na primeira linha do router.js, eu estava usando o 'V' em maisculo, complicado né... kkkkk
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!