Vue随机路由组件

Question

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

可以将路径设置为/link_1，但每次访问此路由时都会加载不同的组件。

例如：第一次访问/link_1时加载Link1.vue组件，第二次用户访问/link_1时加载并显示Link2.vue组件。

- NGrdanjski

---

这听起来像是一个 XY 问题。你为什么需要这个？ - Andrew Li

我有一个<router-link to="/link_1">链接1</router-link>，我希望每次用户点击链接时加载不同的链接或组件。路由不必相同。例如，第一次单击链接1转到/link_1，第二次单击/link_2。 - NGrdanjski

为什么不将数字作为变量/参数发送到URL中？ - Andrew Li

因此，请保持计数器并根据该计数器更改链接。 - Andrew Li

我不知道怎么做。你能帮我吗？ - NGrdanjski

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>

- Brian Lee