将动态数据传递给 Vue params/routes

Question

我是 Vue 的新手，正在努力让一些东西发挥作用。不完全确定这是否可能，但我会问，我们会看到 Stack Overflow 的神灵必须召唤什么。

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

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

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

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

然后在 <template> 中引用 id 但这不起作用，因为它只是 return 编辑了整个对象。我也尝试过这里提到的解耦：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

我已经弄明白了。

为了根据传入的id动态传递数据到url，你需要创建一个数据对象，然后在<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>

将动态数据传递给 Vue params/routes

Passing dynamic data to Vue params/routes

javascript

vue.js

vue-cli