Как создать два разных значения Vue-Router?

Question

РЕШЕНИЕ:

Это файл router.js ---

import Vue from "vue";
import Router from "vue-router";
import Hey from "./components/hey.vue"
import Search from "./components/search.vue"

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "Home",
      component: Search
    },
    {
      path: "/:positionName/:jobId",
      name: "JobDetail",
      component: Hey
    }
  ] 
});

-

export default {
  data() {
    return {
      positionName: this.$route.params.positionName,
      id: this.$route.params.jobId,
      items: {}
    };
  },
  created() {
    this.$http
      .get(
        "http://www.json-generator.com/api/json/get/cqdiacEgfC?indent=2" +
          this.positionName +
          this.id
      )
      .then(function(data) {
        this.items = data.body;
      });
  }
};

---

Я хочу создать маршрутизатор сдва разных значения, поступающие из данных json.

http://localhost:8080/(positionName)/(jobId). это то, что я имею в виду.

У нас есть две страницы.одна из страниц search.vue, другая hey.vue.мы ищем работу по тегу или ключу.если мы найдем работу, то мы должны увидеть детали работы.и когда я нажимаю «перейти к деталям», тогда vue должен показать нам детали работы.

<script>
export default {
  data() {
    return {
      positionName: this.$route.params.positionName,
      id: this.$route.params.jobIb
    };
  },
  created() {
    this.$http
      .get("http://www.json-generator.com/api/json/get/ceHCLxJcOa?indent=2" + this.positionName + this.jobIb)
      .then(function(data) {
        this.items = data.body.slice(0, 1);
      });
  }
};
</script>

<template>
<div> 
    <div class="card-body" v-for="item in items" :key="item.id"> 
        <h5 class="card-title">{{item.positionName}}</h5>
        <p class="card-text">{{item.companyName}}</p>
        <p class="card-text">{{item.description}}</p>
        <p class="card-text">{{item.countryName}}</p>
        <p class="card-text">{{item.cityName}}</p>
        <p class="card-text">{{item.address}}</p>
        <p class="card-text">0{{item.contactPhone.areaCode}}-{{item.contactPhone.number}}</p>
        <input type="button" value="Başvur!" class="btn btn-danger">

    </div>
</div>
</template>

Как я могу сделать или Что я делаю не так?

Answer 1

Вы не показываете свой код маршрутизатора.

Вот мой пример:

{
  path: '/search/:term/:page',
  name: 'SearchPage',
  secure: true,
  component: SearchPage,
},

Так что в вашем случае это может быть что-то вроде:

{
  path: '/job/:positionName/:jobID',
  name: 'JobPage',
  component: JobPage,
},

Итак, вы можете видеть, что у меня есть два именованных параметра с добавлением двоеточия (:).

Как только я нахожусь на /search/{term}/{page}, я могу получить доступ к этим параметрам на странице с тем, что у вас есть в данных () возврат.

data() {
  return {
    positionName: this.$route.params.positionName,
    id: this.$route.params.jobID
  };
},