CODEWITHSUNDEEP
laravelvue.jsvue-router
sergioo
sergioo

Reputation: 361

Router Vue, call the same component with different template

using "router-link", I would like to call the same component several times by passing it a different template. But I can't understand how. Can someone help me?

navbar.vue:

<template>
 <div>
    <div>TITLE</div>
        <div class="row">
            <router-link PASS-TEMPLATE-TO-SLOT="<p>hello1</p>" :to="{ name: 'generic-comp'}"> TEST1 </router-link>
            <router-link PASS-TEMPLATE-TO-SLOT="<p>hello2</p>":to="{ name: 'generic-comp'}"> TEST2 </router-link>
            <router-link PASS-TEMPLATE-TO-SLOT="<p>hello3</p>":to="{ name: 'generic-comp'}"> TEST3 </router-link>
        </div>
    <router-view></router-view>
</div>

generic-comp.vue:

<template>
    <div>
        <h1>Title</h1>
        <slot></slot>
    </div>
</template>

Upvotes: 0

Views: 235

Answers (1)

Sphinx
Sphinx

Reputation: 10729

Uses props of the route to pass the components / raw html should be one solution.

Like below demo:

const Generic = { 
  render: function (createElement) {
    return createElement('div', [
      createElement('h3', 'Title'),
      createElement(this.routeSlot, { props: {interval: this.property1}}),
      this.extraSlot && createElement(Vue.component('v-my-slot', {template:this.extraSlot})) // construct one component with raw html
    ])
  },
  props: ['routeSlot', 'property1', 'extraSlot']
}

const Foo = { 
  template: '<div><h4>foo {{counter}} </h4><button @click="add()">Click Me!</button></div>',
  data () { return {counter: 0}},
  props: {
    interval: {
      type: Number,
      default: 1
    }
  },
  methods: {
    add: function () { 
      this.counter += this.interval 
    }
  }
}
const Bar = { 
  template: '<div><h4>bar {{interval}} </h4></div>',
  props: ['interval']
}
const routes = [
  { path: '/foo', component: Generic, props: {routeSlot: Foo, property1: 2} },
  { path: '/bar', component: Generic, props: {routeSlot: Bar, property1: 3, extraSlot: '<p style="color:red">Like a Slot</p>'} }
]
const router = new VueRouter({
  routes
})
const app = new Vue({
  router
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

Upvotes: 1

Related Questions