How to add url to routes?

Question

I have 10 arrays in which I get this information from each character. what I want to achieve is that when I click it takes me to the information inside the array. I have a url field, to make a dynamic route I don't know whether to capture the url or take the number from the array. Here is an example of the array information.

0:
birth_year: "19BBY"
created: "2014-12-09T13:50:51.644000Z"
edited: "2014-12-20T21:17:56.891000Z"
eye_color: "blue"
films: (4) ['https://swapi.dev/api/films/1/', 
'https://swapi.dev/api/films/2/', 'https://swapi.dev/api/films/3/', 
'https://swapi.dev/api/films/6/']
 gender: "male"
 hair_color: "blond"
  height: "172"
  homeworld: "https://swapi.dev/api/planets/1/"
   mass: "77"
  name: "Luke Skywalker"
  skin_color: "fair"
  species: []
  starships: (2) ['https://swapi.dev/api/starships/12/', 
  'https://swapi.dev/api/starships/22/']
  url: "https://swapi.dev/api/people/1/"
  vehicles: (2) ['https://swapi.dev/api/vehicles/14/', 
  'https://swapi.dev/api/vehicles/30/']
   [[Prototype]]: Object

index.js

actions: {async getCharacters({commit}){
 try {
   const response = await fetch('https://swapi.dev/api/people/?page=1')
   const name = this.$route.params.name; 
   const data = await response.json()
   console.log(data.results)

home.vue is where I call the vuex state and call the Card component giving it character props

<template><div class="home">
<Personajes />
<button @click="sortaltura()">Ordenar por altura</button>
<button @click="sortnombre()">Ordenar por Alfabeticamente</button>
<div v-for="character in characters" :key="character.name">
      <Card :character ="character"/></div>

router.js added props true

const routes = [
{
 path: "/",
 name: "Home",
 component: Home,},
 {
 path: "/personaje/:name",
 name: "personaje",
 props: true,
 component: Mostrar,}

Show.vue In this view is where I want to implement to my vuex call the name that comes to me by props

import { computed, onMounted } from "vue";
import { useStore } from "vuex";
 export default {
  props:['name'],
  created(){
  console.log(this.name)},
  setup() {
  const store = useStore();
  const characters = computed(() => {
  return store.state.characters;});
  onMounted(() => {
  store.dispatch("getCharacters");});

    return {
   characters,  
    };},

CardCharacters.vue I pick up with props character from home

<template>
<router-link :to="{name:'personaje' , params: {name: 
 character.name}}">
  {{character.name}}
</router-link>
 props:{
 character:{
 type:Object,},

Answer 1

I think i get what you want to do, please tell me if I don't.

You want to navigate to a component through a route, and give this route a "prop" which will be a character object is that it?

In this case, you can do this:

this.$router.push({
        name: 'NameOfYourRoute',
        params: {
        obj: nameOfYourObject
    },
});
//If your object is a component variable, don't forget the "this."

Then, in the display component, you can use this piece of code (in the "created()" method, to get your object:

//This will test if the object is correctly defined
if(!this.$route.params.obj){
            //Redirection if the object is incorrect
            this.$router.push('Redirection route')
        } else {
            this.character = this.$route.params.obj
            //Your code
}