javascript - 使用 vue-router 从 vue.js 中的 v-link 传递 prop

标签 javascript vue.js vue-router

我有一个正在使用 vue.js 和 vue-router 的原型(prototype)。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)


let router = new VueRouter

import App from './App.vue'
import Details from './Details.vue'
import Pics from './Pics.vue'

router.map({
  '/details':{
    name: 'details',
    component: Details
  },
  '/pictures':{
    name: 'pics',
    component: Pics
  }
})

router.start(App, '#app')

App.vue 包含我的 router-view安装点。应用程序还包含 Location 的列表基于存储在我的共享状态中的位置数据的组件:

应用程序.vue:

<script>
    import state from './state.js'
    import Location from './Location.vue'

    module.exports = {
      components: {Location},
      data: () => {
        return {
          name: 'app',
          locations: state.locations
        }
      }
    }
</script>

<template>
  <div class="app-container">

    <h2 class="heading">Locations</h2>
    <div class="body">
      <div class="column">
        <location v-for="location in locations" :location="location"></location>      
      </div>
      <div class="column">
        <router-view></router-view>      
      </div>
    </div>
  </div>

</template>

状态.js:

exports.locations = [
  { name: 'Home', address: '123 main st', pics: [{src: '/images/123.png'}]},
  { name: 'Work', address: '555 Avenue st', pics: [{src: '/images/lol.jpg'}, {src: '/images/wrkn.jpg'}]},
  { name: 'Some Landmark', address: '42 E West st', pics: [{src: '/images/coolpic.jpg'}, {src: '/images/qwerty.jpg'}]}
]

Location.vue组件包含 v-links我用来触发路由器:

位置.vue:

<script>
    module.exports = {
      props:['location'],
      data: () => {
        return {name: 'location'}
      }
    }
</script>

<template>
  <div class="location-container">
    <h3>{{location.name}}</h3>
    <a v-link="{name: 'pics'}">Pics</a>
    <a v-link="{name: 'details'}">Details</a>
  </div>
</template>

我想要的是将给定位置状态实例作为 Prop 传递给路由器调用的组件( Details.vuePics.vue ),当特定位置为 v-link 时被点击。

我遇到的问题是,虽然我知道文档说你可以做到这一点,但他们没有解释如何做到这一点,而且我无法弄清楚如何做到这一点。我尝试将位置绑定(bind)到 router-viewApp.vue :

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

并将其绑定(bind)到 router-view 内的占位符:

<router-view>
    <details :location="location"></location>
</router-view>

这两者都不起作用。

这样做的正确方法是什么?

我在这里有一个问题的 WebpackBin 演示:http://www.webpackbin.com/4kDRbt28W

最佳答案

对于那些感兴趣的人:我们在 gitter 上找到了答案。

解决方案是根本不传递该对象,而是将其 ID 作为 URL 中的参数传递(例如 /details/1827),然后从存储中的存储中获取该 ID 的对象组件。

优点:可以直接从外部源导航到 URL,并且应用程序状态良好。

关于javascript - 使用 vue-router 从 vue.js 中的 v-link 传递 prop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38309810/

相关文章:

Javascript Fetch API 太快;在第二个 HTTP(获取 api)请求之前完成

javascript - 滚动时根据线性渐变背景设置适当的元素颜色

javascript - [Vue 警告] : Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

vue.js - 如果目标重定向解析为相同的路径,则不调用 Vue 路由器 beforeEach

vue.js - Vue-router 不加载输入到浏览器中的 URL

javascript - Preventdefault 和 stoppropagation 不适用于指针移动

php - 当您回答问题并且有人提交了另一个答案时,stackoverflow 上显示的弹出警报是如何创建的?

javascript - Vue路由器保持事件和挂载行为

javascript - Json响应vue

json - Nuxt 如何在数组上循环并使用 v-for 正确显示数据