Router Vue，使用不同的模板调用相同的组件

Question

使用“路由器链接”，我想通过传递不同的模板来多次调用同一个组件。 但我不明白怎么做。 有人能帮我吗？

导航栏.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>

通用comp.vue：

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

Answer 1

使用路径的道具传递组件/原始 html应该是一种解决方案。

就像下面的演示：

 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>