观察更改路线并获取数据

Question

如果我在路线上：

person/:slug

然后点击链接：

<div v-for="person in persons" v-link="{ name: 'person', params: { slug: person.slug }}">

URL将更改参数，但实际内容/组件不会更新。如果我点击刷新它将自更新URL。我没有运气就试过了canReuse属性。

路线：

router.map({
    '/': {
        name: 'search',
        component: Search
    },
    '/person/:slug': {
        name: 'person',
        component: Person
    }
})

组件：

<template>
    {{ person.slug }}
</template>


<script>
    import PersonRepository from '../person-repository.vue'

    export default {
        data () {
            return { person: null }
        },
        asyncData (resolve, reject) {
            return PersonRepository.get(this, this.$route.params.slug).then((person) => {
                return { person: person }
            })
        }
    }
</script>

Answer 1

您是否尝试使用路由器挂钩代替异步数据？推荐的方法是路由器挂钩。

您特别需要数据挂钩：http://vuejs.github.io/vue-router/en/pipeline/data.html

在激活挂钩解析后，在激活阶段调用传入组件。 当路由发生变化并重新使用当前组件时也会调用它。使用此挂钩在当前组件上加载和设置数据。

export default {
    data () {
        return { person: null }
    },
    route:{ 
        data: function (transition) {
            return PersonRepository.get(this, this.$route.params.slug).then((person) => {
                return { person: person }
            })
        }
    }
}

通过返回承诺，您的组件将在承诺解决后重新加载。此外，您还可以访问属性$loadingRouteData，您可以使用该属性来显示加载微调器或其他。

Answer 2

观察更改路线并获取数据

对于vue-router的版本3+，您可以使用观察者并观看$route，然后相应地更新您的数据：

export default {
    data () {
        return { person: null }
    },
    created () {
        // Initial load fetch your data
        this.asyncData()
    },
    watch: {
       // call the method again if the route changes
       '$route': 'asyncData'
    }
    methods: {
       asyncData () {
           // ... your person fetching code
       }
    }
}

您可以在路线更改之后或之前获取。请参阅the docs。

Answer 3

尝试一下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

namespace imageStream_client
{
    public class Viewer : MonoBehaviour
    {
        public RawImage rawimage;
        public AspectRatioFitter fit;

        #region Data
        public static Viewer instance;
        private byte[] imageToDisplay;
        #endregion

        #region Get Set
        public void SetImageToDisplay(byte[] image)
        {
            DisplayImage(image);
            //instance.imageToDisplay = image;
        }
        #endregion

        #region API
        internal static void DisplayImage(byte[] image)
        {
            if (image == null)
                return;
            if (image.Length > 0)
            {
                //이미지 크기 생성 이후 streaming 되는 이미지 크기에 맞게 수정 해야함
                Texture2D texture = new Texture2D(640, 480);

                //byte형식의 데이터를 texture2D 형식으로 읽음
                bool load = texture.LoadImage(image);
                if (load)
                {
                    //이미지를 화면에 입힘(Canvas 아래 RawImage)
                    instance.rawimage.texture = texture as Texture;
                    //이미지 가로 세로 비율
                    instance.fit.aspectRatio = 640 / 480;
                }
            }
        }
        #endregion
        // Start is called before the first frame update
        void Awake()
        {
            instance = this;
        }

        // Update is called once per frame
        void Update()
        {
            //DisplayImage(instance.imageToDisplay);
        }
    }
}

Vue js v-link相同路由不更新内容

3 个答案:

观察更改路线并获取数据