VueRouter this.$route 未定义答案

【问题标题】：VueRouter this.$route undefinedVueRouter this.$route 未定义
【发布时间】：2020-07-09 00:38:16
【问题描述】：

在前端大部分是新的，在 Vue 中绝对是新的。我正在尝试从 URL 中读取查询参数。下列的 How can I get query parameters from a URL in Vue.js? 和 https://router.vuejs.org/guide/#javascript

我现在有这个代码：

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

但是，在 Chrome 或 Firefox 中运行它会产生“无法读取未定义的 'query' 的属性”

定义路由并创建指向它们的链接并加载它们，正如 VueRouter 指南中所描述的那样。所以看起来 VueRouter 已经加载了？

我做错了什么？

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

vue-router 的渲染速度可能是问题所在。您可以尝试在任何 Vue 生命周期挂钩中分配值

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

【讨论】：