PROSAGA码农传奇-Vue-Vue随机路由器组件

<div class =“post-text”itemprop =“text”>
  <P>
    你可以结合使用
     <code>
      watch
    </code>
     和
     <code>
      <component>
    </code>
     每次单击链接时呈现动态组件。
  </p>
  <P>
    例如，这会生成100个名为的组件
     <code>
      component1
    </code>
     通过
     <code>
      component100
    </code>
    ，每次随机渲染一个
     <code>
      <router-link></router-link>
    </code>
     单击：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“false”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          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
        })
      }
    }
  }
})
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>