vue-router this.$route 对象始终为空，带有单个文件组件答案

【问题标题】：vue-router this.$route object is always empty with single file componentsvue-router this.$route 对象始终为空，带有单个文件组件
【发布时间】：2018-02-15 07:45:57
【问题描述】：

我正在使用带有 vue-router 和 vue-2.0 的单个文件组件，但我遇到了一个似乎无法解决的问题。从组件调用的this.$route 对象总是返回空值。

例如

Messages.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Post List</div>

                    <div class="panel-body">
                        <li v-for="item in items">
                            {{ item.message }}
                        </li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            console.log(this.$route);
        },
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
                items: [
                    {message: 'Foo'},
                    {message: 'Bar'}
                ]
            }
        },
    }
</script>

App.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Messages from './components/Messages';

Vue.use(VueRouter);

const routes = [
    { path: '/user/get/:id', component: Messages},
]

const router = new VueRouter({
    routes
})

const app = new Vue({
    router,
    el: '#app',
    components: { Messages }
});

任何帮助将不胜感激。

【问题讨论】：

您在浏览器中使用的网址是什么？如果是/ 我认为它工作正常。尝试将?parameter=1放在你的url末尾，并检查路由器中的query是否改变
@EvaldoBratti 网址是 user/get/2
我也有同样的问题。你解决了吗？下面的答案似乎都没有理解这个问题。我可以用settimeout 解决它，但这不是一个好的解决方案

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

您只需在此处告诉 Vue 渲染路由器视图，您可以通过添加包含 route-view 指令的模板来修改 Vue 初始化来做到这一点。

const app = new Vue({
  router,
  el: '#app',
  template: '<router-view/>',
  components: { Messages }
})

这应该可以为你工作。

【讨论】：

这只是将我重定向到一个空白页面。我只需要能够访问 this.$route 这样我就可以提取 url 参数。

【解决方案2】：

很难知道问题出在哪里，因为您没有包含代表根组件用于呈现的模板的 HTML。

如果您的根组件正在渲染router-view 组件，那么路由参数应该在Messages 组件实例中可用。

以下是使用您的设置的示例：https://codepen.io/autumnwoodberry/pen/WEBEKd?editors=1010

【讨论】：