How to implement permalinks in a serverless Vue SPA

Question

I made this little app which is a simple Vue serverless SPA. I wish to pass an array of strings and a an array of numbers through the URL so that I can share "states" of the websites with colleagues. I understand vue-routercan update the route's parameters as per their documentation, but I do not have enough perspective to see how to implement this to solve my problem. I would love some help or guidance so I actually learn from this. Thank you all.

EDIT: after Mr. Luis Brito's hint. I added the following to my code (props)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: require('@/views/Home').default,
      props: { myNumbers: [1,2,3]}
    },
  ]
})

in a component I did

mounted () {
  this.$router.push({ name: 'myNumbers', params: {myNumbers: [1,2,3,4] }})
  const myNumbers = this.$route.params.myNumbers
  console.log(myNumbers);
}

But now my App throws a Vue-Router error [vue-router] Route with name 'myNumbers' does not exist but it does console log the numbers I pushed. Is it possible to make my app look for props and only if they are there to do something with them? Otherwise I get a white screen.

Answer 1

The way I see to solve this problem is use vue-router with a route that passes props to the component, that prop can be an object containing the two arrays that you mentioned.

Referer to Vue Router - Obect Mode

Here is an example for the router:

const routes = {
  path: '/promotion/from-newsletter',
    component: Promotion,
    props: { myNumbers: [1,2,3,5,8], myStrings: ['first', 'second', 'third'] 
  }
}

On the component side, you can access those props on created() lifecycle hook, or mounted()

props: ['myNumbers','myStrings '],
mounted() {
   if ( this.myNumbers !== undefined && this.myStrings !== undefined ) {
      console.log(thys.myNumbers, this.myStrings);
   }
}

So that http://localhost:8080/?myStrings=layer1,layer2,layer3&myNumbers=-1,2,3-4 would console log layer 1-3 and the numbers.

EDITED

TO pass the values programatically, would be better to use Function Mode to capture the URL params and pass it to component. Another way would be to create a component where you can input the numbers and strings that you want, and then call the router and pass those values to the route for the final destination component.