Anuncio

Entra a participar en el Slack de Laraveles. Solicita tu invitación aquí.
Nos ayuda a manter la comunidad

#1 01/02/2018 18:01:38

DevelOper
Miembro
Registrado: 24/02/2016
Mensajes: 7

Problema con vue-router y component

Buena tarde,

Tengo un problema y es que cuando estoy haciendo el enrutamiento con vue-route:

import Vue from 'vue'
import Router from 'vue-router'

import SolutionIndex from '../views/solutions/index.vue'

Vue.use (Router)

export default new Router({
	routes: [
		{
			path: '/',
			name: 'home',
			component: {
				template: '<h1>Hola Mundo!</h1>'
			}
		},
		{
			path: '/solutions',
			name: 'solutions',
			component: SolutionIndex
		}
	]
})

La pagina me carga con el Hola Mundo! y la url queda : http://localhost/#/, pero cuando escribo http://localhost/#/solutions se queda la misma página del Hola Mundo! y no arranca, así que decidí colocar un console.log en el componente para ver si entraba y efectivamente entra:

<template>
	<div>
		Hola mundo!!!!
	</div>
</template>

<script type="text/javascript">
	export default {
		data () {
			return {
				model: {
					data: []
				}
			}
		},
		beforeRouteEnter(to, from, next) {
			console.log ('entro al solutions/index')
		}
	}
</script>

pero lo que esta en template no lo renderiza. Otra cosa curiosa es que coloque unos enlaces en la App.vue:

<template>
	<div>
		<h1>Router demo</h1>
		<p>
			<router-link :to="{ name: 'home' }">Home</router-link> |
			<router-link :to="{ name: 'solutions' }">Soluciones</router-link>
		</p>
		<div class="container">
			<router-view></router-view>
		</div>
	</div>
</template>
<script>
	export default {

	}
</script>

pero cuando tengo el router así como lo publique más arriba, la navegación no se ve reflejada en la URL, pero si coloco require(.../index.vue).default
la navegación anda correctamente, pero no se renderiza lo que hay en template, si coloco asi los componentes, la aplicacion me anda correctamente:

import Vue from 'vue'
import Router from 'vue-router'

import SolutionIndex from '../views/solutions/index.vue'

Vue.use (Router)

export default new Router({
	routes: [
		{
			path: '/',
			name: 'home',
			component: {
				template: '<h1>Hola Mundo!</h1>'
			}
		},
		{
			path: '/solutions',
			name: 'solutions',
			component: {
                               template: '<h1>Hola mundo 2</h1>'
                        }
		}
	]
})

Que puede ser? llevo dos días buscando y nada.

EDIT:
Este es mi archivo app.js

require('bootstrap');

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

//window.Vue = require('vue');
const app = new Vue({
	el: '#root',
	render: h => h(App),
	router,
});

Última edición por DevelOper (01/02/2018 18:04:04)

Desconectado

Pié de página <- REVISAR ->

Powered by FluxBB

Ayuda a mantener la comunidad: