Компонент Vue Random Router - PullRequest
Новая
       7

Компонент Vue Random Router

0 голосов
/ 15 декабря 2018 

{
    path: '/link_1',
    name: 'link_1',
    component: () => import('./views/Link1.vue')
},

Возможно иметь один путь, например / link_1, но каждый раз при переходе по этому маршруту загружать разные компоненты.

Like: Первый раз при переходена / link_1 загружаем Link1.vue и второй раз, когда пользователь заходит на / link_1 загружает и отображает Link2.vue.

1 Ответ

0 голосов
/ 15 декабря 2018

Вы можете использовать комбинацию watch и <component> для рендеринга динамического компонента при каждом щелчке по ссылке.

Например, генерируется 100 компонентов с именами от component1 до component100,рендеринг одного в случайном порядке при каждом нажатии <router-link></router-link>: 

Vue.use(VueRouter)


const router = new VueRouter({
  routes: [{
    path: '/random/:id'
  }]
})



const components = Array.from(Array(100), (x, i) => {
  return {
    name: `component${ i+ 1 }`,
    props: ['lorem'],
    template: `
    <v-card>
    <v-card-title>
    <v-avatar>
    <span class="blue-grey--text headline">${i + 1}</span>
    </v-avatar>
    </v-card-title>
    <v-divider></v-divider>
    <v-card-text>
    <v-container fluid>
      <v-layout justify-center>
        <v-flex>
        <span class="subheader" v-html="lorem"></span>
        </v-flex>
      </v-layout>
    </v-container>
    </v-card-text>
    </v-card>
    `
  }
}).reduce((carry, c) => {
  carry[c.name] = c
  return carry
}, {})

new Vue({
  el: '#app',
  components,
  router,
  computed: {
    current() {
      return `component${this.cid}`
    }
  },
  data() {
    return {
      cid: 1,
      lorem: 'What mystery does the next page hold?'
    }
  },
  watch: {
    '$route': {
      handler: function() {
        let id = this.cid

        while (this.cid === id) {
          id = Math.floor(Math.random() * 100) + 1
        }

        this.cid = id
        
        fetch('https://baconipsum.com/api/?type=all-meat&paras=3&format=html').then(res => res.text()).then(data => {
          this.lorem = data
        })
      }
    }
  }
})
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>


<div id="app">
  <v-app>
    <v-container>
      <v-toolbar app>
        <v-toolbar-items>
          <v-btn :to="`/random/${cid}`" color="deep-orange darken-4" dark>Click Me</v-btn>
        </v-toolbar-items>
      </v-toolbar>
      <v-content>
        <v-slide-x-transition leave-absolute mode="out-in">
          <component :is="current" :lorem="lorem"></component>
        </v-slide-x-transition>
      </v-content>
    </v-container>
  </v-app>
</div>
...