Vuejs Как остановить изменение типа параметров маршрута при вводе с url или router-link

Question

Изменения параметров маршрута Тип

• в строку, когда я ввожу с URL-адреса

• в Number при передаче от router-link.

router.js

{
  path: '/post/:id',
  name: 'postdetails',
  component: () => import('./components/PostDetails.vue'),
  props: true,
}

когда я использую "router-link", он передаст опору как тип "number"

  <router-link :to="{name:'postdetails', params:{id: post.id}}">
      <div class="title" @click="viewPost">
        <h4>{{post.user_username}} -</h4>
        <p>{{post.title}}</p>
      </div>
    </router-link>

если нажать на элемент внутри маршрутизатора ссылка будет перенаправлять на другую страницу и "params.id" имеет тип номера.

export default {
  name: "PostDetails",
  props: {
    id: Number
  },
  created() {
    console.log(this.id);
  }
};

Но когда я ввожу его в URL-адрес следующим образом:

http://localhost:8080/post/1

опора params становится String

как я могу предотвратить постоянное изменение типа опоры params?

Answer 1

Если вы хотите сохранить параметры маршрута для определенного типа погоды, он был введен с URL- адреса или отправлен по ссылке маршрутизатора, вы можете сделать это, добавив условие в свойства маршрутизатора.

{
  path: '/post/:id',
  name: 'postdetails',
  component: () => import('./components/PostDetails.vue'),
  props(route) { // we keep the params.id Type from changing when entered from url
    let props = { ...route.params }
    props.id = parseInt(props.id)
    return props
  },
},

теперь идентификатор в реквизитах всегда будет числовым типом, даже если введен с URL-адреса.

есть форум от vuejs, похожий на этот

Router-vue, номер типа реквизита не приведен

Answer 2

Что касается вашего вопроса, вы можете создать вычисляемое свойство, которое преобразует полученный параметр в желаемый тип. Тривиальная реализация для преобразования его в строку:

computed: {
    idStr: function() {
        return this.id + '';
    }
}

Проверьте оставленный мной комментарий, чтобы понять, что происходит под капотом.