Question

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

e.g。

Messages.vue

＆＃13;

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

＆＃13;

App.js

＆＃13;

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 }
});

＆＃13;

非常感谢任何帮助。

Answer 1

你只需告诉Vue这里通过添加一个包含route-view指令的模板来修改Vue初始化来呈现你可以做到的路由器视图。

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

这应该让它适合你。

Answer 2

很难知道问题是什么，因为您没有包含表示根组件用于呈现的模板的HTML。

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

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

vue-router这个。$ route对象总是空的单个文件组件

2 个答案: