Vue - pass prop via router to component

vue router-link pass props
vue router push props
vue router pass data
vue props
vue router pass object
vue router props not working
vue router params
vue router-link params

I have a component with the object "project_element" and I want to transfer the object to another component through the "vue-router".

This is the code from my first component which opens the second component if the user clicks on the button.

<router-link :to="{ name: 'project', params: { project_url: project_element.project_name, project_element: project_element} }">
     <b-button> Open </b-button>
</router-link>

This is the code from my Vue Router in index.js

{
  path: '/projects/:project_url',
  component: SingleProjectViewApp,
  name: 'project',
  props: { project_element:  project_element }
},

I already managed to set the "project_element.project_name" to the url but I also need the "project_element" itself in my second component.

In the compenent I have set the object in the "props section"

props: {
  project_element: {
    type: Object,
    required: true
  }
},

The problem is in the Vue Router, I can't pass the project_element like a variable, only with quotation marks. But then I get an error because obviously the component expected an object and not a string.

Thanks for your help!

Try this in your router

path: '/projects/:project_url?',
component: SingleProjectViewApp,
props(route) {
      const props = {
        projectElement: route.params.project_url
      };

      return props;
    }

and in your props change "project_element" to "projectElement" (generally you want to do camel case in vue props)

props: {
  projectElement: {
    type: Object,
    required: true
  }
},

Simple guide to passing props with Vue Router (and attributes), Passing props to a component using routes path. TheSecondSimpleComponent is quite similar to the TheFirstSimpleComponent . The only� This allows you to use the component anywhere, which makes the component easier to reuse and test. # Boolean mode. When props is set to true, the route.params will be set as the component props. # Object mode. When props is an object, this will be set as the component props as-is. Useful for when the props are static.

The first thing that came to my mind is JSON.stringify() and JSON.parse(). Although I am not sure this is a perfect solution.

Any way try this:

<router-link :to="{ name: 'project', params: { project_url: project_element.project_name, project_element: JSON.stringify(project_element)} }">
     <b-button> Open </b-button>
</router-link>
// router.js
{
  path: '/projects/:project_url',
  component: SingleProjectViewApp,
  name: 'project',
  props(route) { 
    return {
      project_element:  JSON.parse(route.params.project_element),
    }
 }
},

Note: I honestly think this is an antipattern and you should use different aproach for comunicating through components. custom-events, centralized-state, event-bus or even provide & inject will all be better for that kind of work.

Vue-router — props — 1/2. How to send data as props by vue-router , How to pass data to a component as props by vue-router? where you had some data in a $route.params like the id and kept using this. The Vue team provides what they call props which are custom attributes you can register on any component. The way it works is that you define your data on the parent component and give it a value, then you go to the child component that needs that data and pass the value to a prop attribute so the data becomes a property in the child component.

routes: [
{
  path: '/',
  name: 'start',
  component: Start,
  meta: {
    my_data: "my data here",
  },
},]

to get data inside the component

this.$route.currentRoute.meta.my_data

UPDATE

this.$route.push("/"+ JSON.stringify(data) )



routes: [
{
  path: '/:data',
  name: 'start',
  component: Start,

},]

to get data inside the component

JSON.parse(this.$route.params.data)

Vue - pass prop via router to component, Try this in your router path: '/projects/:project_url?', component: SingleProjectViewApp, props(route) { const props = { projectElement:� Vue - pass prop via router to component. 1. pass in props to vue-router, with boostrap-vue b-nav-item. Hot Network Questions Can an enemy "surprise" a character with

How to pass Vue Router params as props to components, First we'll refactor our route params from using an ID to using a slug. At the end of the lesson, we learn how to pass route params as props to our route components � For example, let’s say we’re working on a user profile page and want to have a child component accept a username prop. We’ll need two components. The child component accepting the prop, let’s call this AccountInfo.vue. The parent component passing the prop, let’s call this ProfilePage.vue.

How to pass props to vueJS components using Vue-router, you can find a detailed answer in the docs here Passing Props to Route Components but to sum it up quickly, set props in your router file [code]{ path: '/', name:� As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component. Remember that params or query changes won't trigger enter/leave navigation guards.

Vue Router - Passing props - JSFiddle, <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>. 3 const router = new VueRouter({. 5 path: '/foo/:name', component: Foo, props: true }. Basically that's how props are passed to React components. As you may have noticed, props are only passed from top to bottom in React's component tree. There is no way to pass props up to a parent component. We will revisit this issue later in this article. In addition, it's important to know that React's props are read only.

Comments
  • I honestly thnk this is an antipattern and you should probably use different aproach for comunicating through components. I'm talking about custom-events, centralized-state, event-bus or even provide & inject would be better.