[Vuejs]-Vue: How to pass custom props and router props?

by

0👍

✅

With Vue router you can access both information (props and params), just use a different pattern to get it:

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>

Leave a comment