Question

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

可能有一个像/ link_1这样的路径，但是每次转到此路由时，都会加载不同的组件。

像：第一次进入/ link_1加载Link1.vue，第二次用户进入/ link_1加载并显示Link2.vue。

Answer 1

每次单击链接时，可以结合使用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>

Vue随机路由器组件

1 个答案: