Vue.js 如何在此vue示例中显示内容？_Vue.js_Vuejs2_Vue Router

Vue.js 如何在此vue示例中显示内容？

vue.js vuejs2

Vue.js 如何在此vue示例中显示内容？,vue.js,vuejs2,vue-router,Vue.js,Vuejs2,Vue Router,我第一次使用vue，并创建了一个简单的测试文件。我有一个由api调用的数据填充的表，并使用vue路由器创建指向每个项目的链接，但此链接不显示内容。网络显示它正在向api发出请求，但由于某种原因，模板没有显示（甚至没有硬编码的内容）。为什么？另外，为什么路由内容不显示在第一个路由器视图上，而只显示在tbl组件中的路由器视图上 <!doctype html> <html lang="en"> <head> <title>Vue.js test&

我第一次使用vue，并创建了一个简单的测试文件。我有一个由api调用的数据填充的表，并使用vue路由器创建指向每个项目的链接，但此链接不显示内容。网络显示它正在向api发出请求，但由于某种原因，模板没有显示（甚至没有硬编码的内容）。为什么？另外，为什么路由内容不显示在第一个路由器视图上，而只显示在tbl组件中的路由器视图上

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


Vue.js测试
去福
const foo={模板：'asdfasdf'，}；
var路由器=新的VueRouter({
路线：[
{路径：'/foo'，组件：foo}，
{path:'/notifications/:id'，组件：notification\u view}
]
});
var app=新的Vue({
路由器：路由器
}).$mount（“#app”）；
var通知\u视图=新的Vue({
路由器:路由器,，
模板：`
眼压
id:{{obj.id}}

标题：{{obj.data.title}}

消息：{{obj.data.message}}

`,
数据：{
obj:{}，
id:0，
},
观察：{
“$route”（到，从）{
//检查url中的id
if（此.$route.params.id）
此.update_通知（）；
}
},
方法：{
更新通知：函数（）{
this.id=this.$route.params.id；
axios.get（）http://api2/notifications/“+this.id）
.then（response=>{this.obj=response.data.packet；}）；
}
}
});
var tbl=新的Vue({
路由器:路由器,，
el:'表格通知'，
模板：`
标题
创建
行动
{{obj.data.title}
{{obj.created}
行动
`,
方法：{
链接：函数（obj）{return'/notifications/'+obj.id；}
},
数据：{
对象：[]，
},
已创建：函数（）{
axios.get（）http://api2/notifications').
然后（响应=>
{
this.objects=response.data.packet；
});
}
});

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

在您的示例中，您有：

一个JSON foo，我认为它是一个组件

安装到#App元素的应用程序实例

另一个名为

notification\u view

的实例使用相同的路由器，我认为是另一个组件

另一个tbl实例，我认为它是另一个组件

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