我如何在此 vue 示例中显示内容？

Question

第一次接触vue，敲了一个简单的测试文件。我有一个 table 由来自 api 调用的数据填充，并使用 vue 路由器为每个项目创建 links 但这个 link 没有显示内容。网络显示它正在向 api 发出请求，但由于某种原因，模板没有显示（甚至没有硬编码的内容）。为什么？还有，为什么在第一个router view上不显示路由内容，而在tbl组件中只显示router-view？

<!doctype html>
<html lang="en">
<head>
    <title>Vue.js test</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="app">
        <!-- this route displays correctly -->
        <router-link to="/foo">Go to Foo</router-link>
        <table-notification/> 
          <!-- content is not displayed here - why? --> 
          <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
    <script src="axios.min.js"></script>

    <script>    
        const foo = {template:'<div>asdfasdf</div>',};

        var router = new VueRouter({
            routes: [
                {path: '/foo', component: foo},
                {path: '/notifications/:id', component: notification_view}
            ]
        });

        var app = new Vue({
            router: router
        }).$mount('#app');

        var notification_view = new Vue({
            router: router,
            template: `
                <div>iop
                    id: {{ obj.id}}<br/>
                    title: {{ obj.data.title}}<br/>
                    message: {{obj.data.message}}<br/>
                </div>      
            `,

            data: {
                obj: {},
                id: 0,
            },

            watch: {
                '$route' (to, from) { 
                    // check for id in url
                    if (this.$route.params.id)
                        this.update_notification(); 
                }
            },

            methods: {
                update_notification: function(){
                    this.id = this.$route.params.id;
                    axios.get('http://api2/notifications/' + this.id)
                        .then(response => {this.obj = response.data.packet;});
                }
            }
        });

        var tbl = new Vue({
            router:router,
            el: 'table-notification',
            template: `
            <div>
                <table>
                    <tr>
                        <th>Title</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                    <tr v-for="obj in objects">
                        <td><router-link :to="link(obj)">{{obj.data.title}}</router-link></td>
                        <td>{{obj.created}}</td>
                        <td>actions</td>
                    </tr>
                </table>
                <router-view/>
                <!-- why must router-view be here, and why isn't notification_view showing any output?-->
            </div>
            `,
            methods: {
                link: function(obj) {return '/notifications/' + obj.id;}
            },

            data: {
                objects: [],
            },

            created: function(){
                axios.get('http://api2/notifications').
                    then(response => 
                    {
                        this.objects = response.data.packet;
                    });
            }


        });
    </script>
</body>
</html>

Answer 1

我认为您误解了 Vue 实例的概念...

在你的例子中你有：

一个JSON我认为是组件的foo，
一个App实例，挂载到#app元素
另一个叫notification_view的实例有相同的路由器，我认为是另一个组件
另一个tbl实例，我认为它是另一个组件

您实际上需要一个实例和一堆组件，如本例所示：

https://jsfiddle.net/dcr3jyzo/

我如何在此 vue 示例中显示内容？

how do i show content in this vue example?

vue.js

vue-router

vuejs2