VueRouter this.$route 未定义

Question

Mostly new at frontend, definitely new at Vue.前端大部分是新的，Vue 绝对是新的。 I'm trying to read query parameters from the URL.我正在尝试从 URL 读取查询参数。 Following How can I get query parameters from a URL in Vue.js?以下如何从 Vue.js 中的 URL 获取查询参数？ and https://router.vuejs.org/guide/#javascript和https://router.vuejs.org/guide/#javascript

I now have this code:我现在有这个代码：

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>

<body>

<div id="app">
    {{message}}
</div>


<script>
const routes = [];

var router = new VueRouter({
    routes
});

var vm = new Vue({
    el: '#app',
    router,
    data: {
        message: this.$route.query
    }
});
</script>

</body>

</html>

However, running it in Chrome or Firefox yields an "cannot read property of 'query' of undefined"但是，在 Chrome 或 Firefox 中运行它会产生“无法读取未定义的'查询'的属性”

Defining routes and creating links to them and loading them, as also described in that VueRouter guide works.定义路由并创建指向它们的链接并加载它们，如该 VueRouter 指南中所述。 So it looks like the VueRouter is loaded?所以看起来VueRouter已经加载了？

What am I doing wrong?我究竟做错了什么？

Answer 1

The rendering speed of the vue-router might be the issue. vue-router的渲染速度可能是问题所在。 You can try assigning the value in any of the Vue life cycle hooks您可以尝试在任何 Vue 生命周期钩子中分配值

var vm = new Vue({
    el: '#app',
    router,
    data: {
        message: null
    },
    created(){
        this.message = this.$route;
    }
});

VueRouter this.$route 未定义

问题描述

1 个解决方案

解决方案1
5 已采纳 2020-03-28 11:00:22

VueRouter this.$route 未定义

问题描述

1 个解决方案

解决方案1 5 已采纳 2020-03-28 11:00:22

解决方案1
5 已采纳 2020-03-28 11:00:22