Use component for all views

Question

Use component for all views

Navigation

#1 by (1 votes)

1

I have a problem, I'm using vue-router and I need my <top-bar/> always to be shown in all the views that go on the router, try to use:

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

also:

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

I want my top-bar to be separated from the main views that would be displayed in vue-router so it will not affect anything.

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
});

How could I make my top-bar not enter within router-view ?

laravel vue.js

asked by DoubleM 22.12.2018 в 01:59

source

1 answer

Problem with navigation drawer show query result

score 1 · Answer 1

First of all you have to create the BarraNavegacion.vue component in the components directory

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

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

Secondly, create a view ( views/InicioVista.vue ) that is what is going to be displayed within <router-view />

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

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

<style></style>

Third, in the App.vue component, you must import and instantiate the navigation bar within the template. Then, instantiate the <router-view /> component.

<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>

Fourth, you create a new instance of the Vue-router and configure a route for each view.

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 });

Finally, create an instance of Vue and inject the instance of the router. It is important to register the App.vue component and call it in the template of the Vue instance, since it is the one with the <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
});