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

Posted 2023-02-22

【中文标题】将动态数据传递给 Vue 参数/路由

【英文标题】：Passing dynamic data to Vue params/routes

【发布时间】：2018-08-19 14:35:25

【问题描述】：

我对 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>

【问题讨论】：

发布code，而不是代码图片。

如果你不表现出你的努力，那么就不会有兴趣帮助你。见how to ask。

对不起，伙计们，我还在学习礼仪。已将屏幕截图替换为代码。

我将添加我现在尝试过的内容:)

【参考方案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>

【讨论】：

使用path: '/projects/:id component: Projects

感谢您的输入，但这已经在我提供的代码中。无论如何，问题现在已经解决了:)