Vue 生成路由器 link

Question

我有用于显示视频的 vue 应用程序。我想每次点击

时自动随机生成路由器 link

<router-link to="/video/this_value_to_be_random">Random video</router-link>

在组件中

<vue-video-background videoSrcMp4="path/to/your/video/file-this_value_to_be_random.mp4"></vue-video-background>

我想把这个随机的value/number传给this_value_to_be_random 这样做的目的是每次我点击 link 时我想在同一个组件中显示不同的视频。或者不同的视频路径。 1-5之间的随机数。

path/to/your/video/file_v1.mp4
path/to/your/video/file_v2.mp4
path/to/your/video/file_v3.mp4

Answer 1

在 Js 中你可以使用：

Math.floor(Math.random() * 10) + 1

这会给你一个介于 1 和 10 之间的数字

Answer 2

您可以添加一个生成随机 link 的方法并将其绑定到 to 道具，如下所示：

  <router-link :to="randomLink()">Random video</router-link>
  ...

 methods:{
     randomLink(){
          let rnd=Math.floor(Math.random() * 5) + 1;
          return 'path/to/your/video/file_v'+rnd+'.mp4'
          }
      }

Vue 生成路由器 link

Vue generate router link

javascript

vue.js

vue-router

vue-component

vuejs2