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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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