Блог

поэтому я пишу код Vue в качестве интерфейса, а DRF-в качестве бэкенда. в одном из моих файлов vue у меня есть ссылка на маршрутизатор с двумя параметрами для передачи идентификатора(class_id) и идентификатора учебной программы другому vue, чтобы я мог использовать axios для извлечения данных объектов класса из внутреннего api. Мне нужно использовать идентификатор для запроса объекта класса и идентификатор учебной программы для фильтрации классов, имеющих один и тот же тип учебной программы. также мне нужен был идентификатор учебной программы для извлечения учебной программы, связанной с этим объектом класса. все работает нормально, за исключением того, что при нажатии кнопки «Обновить» или «Назад» параметры, переданные по пути маршрутизатора vue, теряются, и извлечение данных также теряется. Есть ли какой-нибудь способ решить эту проблему?

 <td><router-link :to="{ name:'Class', params: { id: clss.id, curriculum_id: curriculum.id }}">{{clss.classCode}}</router-link></td>
 

мой внутренний код просмотра:

 class ClassViewSet(viewsets.ModelViewSet):
    serializer_class = ClassSerializer
    queryset = Class.objects.all().order_by('classCode')

    def get_queryset(self):
        curriculumID = self.request.query_params['curriculum_id']
        curriculum = Curriculum.objects.get(pk=curriculumID)
        return self.queryset.filter(program=curriculum)

    def perform_create(self, serializer):
        curriculum = Curriculum.objects.get(name=self.request.data.get('program_name'))
        instructor = Instructor.objects.get(pk=self.request.data.get('instructor_id'))
        serializer.save(program=curriculum, instructor=instructor)
 

в моем классе.vue,

     methods:{
        getCurriculum(){
            // get the params.id from this route's url
            const curriculumID = this.$route.params.curriculum_id
            // const curriculumID = localStorage.curriculum_id 
            console.log(localStorage.curriculum_id)
            axios
                .get(`/api/v1/curricula/${curriculumID}`)
                .then(response => {
                    // JSON data is returned 
                    this.curriculum = response.data
                    // console.log(this.curriculum)
                })
                .catch(error => {
                    console.log(JSON.stringify(error))
                })
        },
        
        getClass(){
            const classID = this.$route.params.id
            const curriculum_id = this.$route.params.curriculum_id
            axios
                .get(`/api/v1/classes/${classID}`,
                    {params:{curriculum_id: curriculum_id}}
                )
                .then(response => {
                    this.clss = response.data
                })
                .catch(error => {
                    // console.log(error.response)
                    console.log(JSON.stringify(error))
                })
        },