Question

我正在尝试查看页面网址。我不使用Vue路由器。

我的最终目标是将页面网址设置为输入值：

<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>

以上示例无法正常工作。

我也尝试过

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

在组件渲染上仅设置一次输入值。
有什么问题吗？

Answer 1

好吧，这正是您要使用vue-router的原因！

vue只能检测反应性的变化：https://vuejs.org/v2/guide/reactivity.html

如果您想对网址中的更改做出反应，则有两种方法：

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

我宁愿使用vue-router或类似的插件。

Vue观看页面网址更改

1 个答案: