1

Tengo un problema, estoy utilizando vue-router y necesito que mi <top-bar/> siempre se muestre en todas las vistas que van en vue router, intente utilizar:

<div class="container">
   <router-view name="topbar">
        <top-bar/>
   </router-view>
    <router-view></router-view>
</div>

tambien:

<div class="container">
        <top-bar/>
    <router-view></router-view>
</div>

Quiero que mi top-bar quede separado de las vistas principales que se mostraran en vue-router asi no afectara nada.

app.js

import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
    { path: '/inicio',            component: require('./components/app/PrincipalComponent.vue') },
]

const router = new VueRouter({
    mode: 'history',
    routes 
})

//Componentes ::
Vue.component('top-bar', require('./components/app/TopBarComponent.vue'));

const app = new Vue({
    el: '#app',
    router
});

Como podría hacer que mi top-bar no entre dentro del router-view?

1 respuesta 1

1

En primer lugar tenes que crear el componente BarraNavegacion.vue en el directorio components

<template>
  <ul>
    <li>Inicio</li>
    <li>Productos</li>
  </ul>
</template>

<script>
export default {};
</script>

En segundo lugar crear una vista (views/InicioVista.vue) que es lo que se va a mostrar dentro del <router-view />

<template>
  <h1>Vista inicio</h1>
</template>

<script>
export default {};
</script>

<style></style>

En tercer lugar en el componente App.vue, hay que importar y instanciar la barra de navegación dentro del template. Luego, instanciar el componente <router-view />.

<template>
  <div id="app">
    <BarraNavegacion />
    <router-view />
  </div>
</template>

<script>
import BarraNavegacion from "./components/BarraNavegacion.vue";

export default {
  name: "App",
  components: {
    BarraNavegacion
  }
};
</script>

<style></style>

En cuarto lugar, creas una nueva instancia del Vue-router y configuras una ruta para cada vista.

import Vue from "vue";
import Router from "vue-router";
import InicioVista from "../src/views/InicioVista.vue";

Vue.use(Router);

const rutas = [{ name: "inicio", path: "/", component: InicioVista }];

export default new Router({ routes: rutas });

Por último, creas una instancia de Vue y injectas la instancia del router. Es importante registrar el componente App.vue y llamarlo en el template de la instancia Vue, ya que es el que tiene el <router-view/>.

import Vue from "vue";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
  router
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.