Question

我正在尝试用Vue编写一个简单的单页面应用程序，以了解它的功能。这个简单的应用程序将显示一个首字母缩略词列表，然后用户可以单击一个链接并获得有关该首字母缩略词的详细信息。我正在使用vue-router来管理路由。我的基本应用程序div如下所示：

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/">Home</router-link>
        <router-link to="/acronyms">All Acronyms</router-link>
    </p>
    <router-view></router-view>
</div>

我首先创建一个模板来列出所有首字母缩略词：

const AllAcronyms = {template: '<div><ul id="all-acronyms"><li v-for="acronym in acronyms">{{ acronym.id }} - {{acronym.abbreviation}}</li></ul></div>' };

然后我创建了路由器，路由和Vue：

    var routes = [
        {
            path: '/acronyms', component: AllAcronyms
        }
    ];
    var router = new VueRouter({
        routes: routes
    });

    var view = new Vue({
        el: "#app",
        data: {
            acronyms: [
                { id: 1, abbreviation: "ABC" },
                { id: 2, abbreviation: "DEF" },
                { id: 3, abbreviation: "GHI" }
            ]
        },
        router: router
    });

它告诉我“缩略语”是未定义的。有没有办法在路由器视图上使用v-for指令，方法是将数据传递给该路由，或者在调用路由时在“all-acronyms”无序列表上创建新的Vue对象？最好的方法是什么？

Answer 1

将acronyms传递给router-view作为道具

<router-view :acronyms="acronyms"></router-view>

编辑：

将acronyms定义为AllAcronyms组件

中的道具

const AllAcronyms = { 
    props:['acronyms']
    ...
}

在路由器视图上调用新的Vue以显示列表

1 个答案: