CODEWITHSUNDEEP
vuejs2
Tarasovych
Tarasovych

Reputation: 2398

Vue watch page url changes

I'm trying to watch page url. I don't use Vue Router.

My final goal is to set page url as input value:

<template>
    <div>
        <input v-model="pageUrl">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageUrl: window.location.href,
                link: ''
            }
        },
        watch: {
            pageUrl: function() {
                this.link = window.location.href
            }
        }
    }
</script>

The example above doesn't work somewhy.

I've also tried

watch: {
    'window.location.href': function() {
        this.link = window.location.href
    }
},

Input value is being set only once on component render.
What can be wrong?

Upvotes: 1

Views: 3562

Answers (1)

phoet
phoet

Reputation: 18845

well, that is exactly the reason you want to use vue-router!

vue can only detect changes in reactive properties: https://v2.vuejs.org/v2/guide/reactivity.html

if you want to react to changes in the url, you have 2 ways:

https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event or https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

i would rather use vue-router or a similar plugin.

Upvotes: 3

Related Questions