Vue generate router link

1
votes

I have vue application for displaying videos. I want to automatic random generate router link every time when i click on 

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

In component 

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

I want to pass this random value/number to this_value_to_be_random Purpose for this is every time when i click to link i want to display different video in the same component. Or different video path. Random number between 1-5.

  • path/to/your/video/file_v1.mp4
  • path/to/your/video/file_v2.mp4
  • path/to/your/video/file_v3.mp4
2
javascriptvue.jsvuejs2vue-componentvue-router

2 Answers

1
votes

You could add a method that generates a random link and bind it to to prop as follows :

  <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'
          }
      }
0
votes

In Js you can use :

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

This will give you a number between 1 and 10