programing

Vue js 라우터: 클릭 이벤트에서 URL 쿼리를 변경하거나 업데이트하는 방법

prostudy 2022. 5. 14. 22:28
반응형

Vue js 라우터: 클릭 이벤트에서 URL 쿼리를 변경하거나 업데이트하는 방법

내 탐색에서 클릭 이벤트 시 라우터 쿼리를 변경/업데이트하려고 하는 중.그러나 내가 무엇을 하든 클릭 이벤트는 URL의 쿼리를 변경하지 않는다.

그러나 vue 구성 요소 내 가드 "BeforeRouteUpdate"에서 console.log(to)를 사용하면 새 매개 변수를 얻는다.query.cnto);

내가 이걸 어떻게 고칠 수 있는지 누가 더 좋은 생각이나 해결책을 갖고 있을까?

내 의도는 다음과 같다.

myhomepage.de/?to=정보
myhomepage.de/?myhomepage.de/=연락처
myhomepage.de/otherpage/?to=정보
myhomepage.de/anotherpage/?myhomepage.de/anotherpage/=서비스
...

다음은 내 설정이다.

라우터 설정:

export default new Router({
mode: 'history',
base: __dirname,
routes: [
    {
        path: '/',
        name: 'home',
        component: Page
    },
    {
        path: '*',
        component: NotFound
    }]

})

내 탐색 링크:

a(href="" @click.prevent="updateNav(item.key)") {{item.title}}

내 방법으로는:

updateNav(query) {
    var data = Object.assign({}, this.$route.query);
    data['scrollto'] = query;
    this.$router.push({name: 'home', query : data });
    ...
}

참조URL: https://stackoverflow.com/questions/47621560/vue-js-router-how-to-change-or-update-url-query-on-click-event

반응형