将动态数据传递给 Vue 参数/路由

Question

我对 Vue 还很陌生，并且正在努力让一些东西发挥作用。不完全确定这是否可能，但我会问一下，我们会看看 Stack Overflow 之神会变出什么。

我想知道是否可以在默认导出的 data () 部分中存储大量 ID 的组件数据/道具。

所以 {{$route.params.id}} 设法从 url 的末尾捕获 id，但我想知道我是否可以让 View 返回存储在组件中某处的其他数据。所以基本上我可以在 Project.Vue 文件中存储 5 个不同 ID 的数据，还是我只需要制作 5 个不同的文件（Project1.Vue、Project2.Vue 等）然后将它们全部设置好作为单独的路线？

到目前为止，我已经尝试向 data() 元素添加添加位，例如

    data () {
        return {
            msg: 'Projects',
            id: [{ 1: 'hi'}, {2: 'hey'}],
            two: 'project two',
            three: 'project three',
        }
    }

然后在 <template> 中引用 id 但这不起作用，因为它只是返回了整个对象。我也尝试过这里提到的解耦：https://router.vuejs.org/en/essentials/passing-props.html，但对此也不满意。

为我糟糕的解释道歉，但我希望有人可以帮助阐明这是否可能。下面使用的代码：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Contact from '@/components/Contact'
import About from '@/components/About'
import Projects from '@/components/Projects'


Vue.use(Router)

export default new Router({
  routes: [
    {
        path: '/',
        name: 'Home',
        component: Home
    },

    {
        path: '/contact',
        name: 'Contact',
        component: Contact
    },

    {
        path: '/about',
        name: 'About',
        component: About
    },

    {
        path: '/projects',
        name: 'Projects',
        component: Projects
    },

    {
        path: '/projects/:id',
        name: 'Projects',
        component: Projects,
        props: {default: true}
    },

  ]
})

Projects.Vue

<template>
    <div id="projects">
    <h1>{{ header }} {{ $route.params.id }}</h1>
        {{id}}
    </div>
</template>



<script>
    export default {
        name: 'Projects',
        watch: {
            '$route'(to, from) {
                // react to route changes...
            }
        },
        data () {
            return {
                header: 'Projects',
            }
        }
    }
</script>


<style scoped>
</style>

Answer 1

我已经弄明白了。

为了根据传入 url 的 id 动态传递数据，您需要创建一个数据对象，然后在 <template> 的内部，您可以传入您创建的对象，然后传递$route.params.id 在方括号内。但是，值得注意的是，由于在 data() 内部创建的对象将使用零索引，因此值得在模板内部添加 -1。请参阅以下代码以了解其工作原理：

<template>
    <div id="projects">
    <h1>{{ msg }} {{ projects[$route.params.id - 1] }}</h1>
    </div>
</template>



<script>
    export default {
        name: 'Projects',
        watch: {
            '$route'(to, from) {
                // react to route changes...
            }
        },
        data () {
            return {
                projects: [
                    {   id: 1,
                        name: 'Project numero uno'
                    },
                    {   id: 2,
                        name: 'Project secundo'
                    },
                    {   id: 3,
                        name: 'Project three'
                    },
                ]
            }
        }
    }
</script>


<style scoped>
</style>