Question

我正在尝试通过重定向将道具从一页传递到另一页。这是重定向的代码：

<router-link :to="{ name: 'shipment', params: { editedItems: getSelected() } }">
        Edit Amount
      </router-link>

这是路由器中路由的原始代码：

{
    path: "/inventory/shipment",
    name: "shipment",
    props: { screen: "shipment" },

    component: Inventory,
  },

可以看出，我也想一直传递一个set变量，即screen。可以使用router-link或通过其他方法来调用路线，装运。我知道通过在路由上设置props: true可以让我获取通过重定向发送的道具，但是如果没有调用router-link的话，它也不允许我通过屏幕道具。我正在寻找的是两全其美，能够发送两个道具。

旁注：我知道我可以通过查看url轻松在页面上获得支持，但是以后如果没有轻松的方法，学习如何做这样的方法将很有帮助。

Answer 1

使用 Vue路由器，您可以访问这两种信息（道具和参数），只需使用其他模式即可获取信息：

const MainView = {
  template: `<div>MAIN VIEW: click on TO INVENTORY to see data passed</div>`
}

const Inventory = {
  props: ['screen'],
  computed: {
    routeParams() {
      return Object.entries(this.$route.params).map(e => {
        return `${e[0]}: ${e[1]}`
      }).join(', ')
    }
  },
  template: `
  <div>
    INVENTORY<br />
    prop: {{ screen }}<br />
    editedItems: {{ $route.params.editedItems }}<br />
    all params: {{ routeParams }}
  </div>
  `
}

const router = new VueRouter({
  routes: [{
    path: '/',
    name: "main",
    component: MainView
  }, {
    path: '/inventory/shipment',
    name: "shipment",
    props: {
      screen: "shipment"
    },
    component: Inventory
  }]
})

new Vue({
  el: "#app",
  router
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-link :to="{ name: 'shipment', params: { editedItems: 'someitem' } }">TO INVENTORY</router-link>
  <router-link :to="{ name: 'main' }">TO MAIN</router-link>
  <router-view></router-view>
</div>

Vue：如何传递自定义道具和路由器道具？

1 个答案: