在 router-view 上调用一个新的 Vue 来显示一个列表

Question

我正在尝试使用 Vue 编写一个简单的单页应用程序以了解它的功能。这个简单的应用程序将显示一个首字母缩写词列表，然后用户可以单击 link 并获得有关该首字母缩写词的详细信息。我正在使用 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
    });

它告诉我 "acronyms" 未定义。有没有一种方法可以通过将数据传递给该路由来在路由器视图上使用 v-for 指令，或者在调用路由时在 "all-acronyms" 无序列表上创建一个新的 Vue 对象？解决此问题的最佳方法是什么？

Answer 1

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

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

编辑：

在 AllAcronyms 组件中将 acronyms 定义为 prop

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

在 router-view 上调用一个新的 Vue 来显示一个列表

Calling a new Vue on router-view to display a list

vue.js

vue-router

vuejs2