Sharing State with a Secure Route in Vue Router (using the script setup method)

Question

Sharing State with a Secure Route in Vue Router (using the script setup method)

Hello everyone, I'm encountering an issue while trying to send a state to the protected routes in vue-router. The error that I faced mentioned "Discarded invalid param(s) "_id", "dish_name", "description", "img", "ingredients", "instructions", "cooking_time", "chef", "createdAt", "updatedAt", "__v" when navigating." You can find more details on this error at https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22.

I am unable to get the params in the protected routes, any insights as to why?

Below are snippets of my code:

The route.js file

/* Your code snippet here */

The function where I am routing to a protected route

/* Your code snippet here */

javascript vue.js vuejs3 vue-router

Answer 1

Answer №1

There are multiple methods to transfer data from one route to another. I will explain two ways to achieve this.

In the first method, you can utilize the props property on the route like so: (Option API approach)

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    ...,
    {
      name: 'team-members',
      path: ':id',
      component: TeamMembers,
      props: true,
    }
    ,,,,    
  ]
})

and then map the data to the component using the props property:

export default {
    props: ['id']
}

To consume the route data:

<router-link :to="'/teams/' + valuePassToRoute">View Members</router-link>

or

this.$router.push({name: 'team-members', params: { id: value },});

To retrieve the data from the route:

const id = this.$route.params.id;

This provides detailed information about #route, where the value is t1

https://i.sstatic.net/qr7WA.png

If you prefer using the query or meta properties, the process is very similar.

To consume the route data:

this.$router.push({ name: 'team-members', params: { id: this.id }, query: { sort: 'asc' }};

To retrieve the data:

const value = this.$route.query.sort;

The second method involves using the Composition API:

<script>
import { useRoute } from 'vue-router';
export default {
    props: ['id'],
    setup() {
        const route = useRoute();
        const value = route.params.id
    }
}
</script>

Answer 2

There are multiple methods to transfer data from one route to another. I will explain two ways to achieve this.

In the first method, you can utilize the props property on the route like so: (Option API approach)

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    ...,
    {
      name: 'team-members',
      path: ':id',
      component: TeamMembers,
      props: true,
    }
    ,,,,    
  ]
})

and then map the data to the component using the props property:

export default {
    props: ['id']
}

To consume the route data:

<router-link :to="'/teams/' + valuePassToRoute">View Members</router-link>

or

this.$router.push({name: 'team-members', params: { id: value },});

To retrieve the data from the route:

const id = this.$route.params.id;

This provides detailed information about #route, where the value is t1

https://i.sstatic.net/qr7WA.png

If you prefer using the query or meta properties, the process is very similar.

To consume the route data:

this.$router.push({ name: 'team-members', params: { id: this.id }, query: { sort: 'asc' }};

To retrieve the data:

const value = this.$route.query.sort;

The second method involves using the Composition API:

<script>
import { useRoute } from 'vue-router';
export default {
    props: ['id'],
    setup() {
        const route = useRoute();
        const value = route.params.id
    }
}
</script>

Sharing State with a Secure Route in Vue Router (using the script setup method)

Answer №1

Similar questions

What is the process for linking an HTML document to another HTML document within a div using jQuery?

Enigmatic void appears above row upon removal of content from a single item

Vue - when multiple parents share a common child component

Vue instance with non-reactive data

Troubleshooting 404 Error When Using Axios Put Request in Vue.js

Is the Spring MVC ModelAndView object being returned?

The dom does not automatically update when data is modified inside the watch function

Unlocking the Potential of Vue Class Components: Exploring Advanced Customization Options

The filter functionality isn't functioning properly when attempting to filter an array of objects within a Vuex action

Positioning Firefox absolutely within a table-cell element is possible

Is it possible to utilize AJAXToolKit and Jquery on a single webpage?

Capturing a part of the screen using JavaScript for screen recording

How can I successfully transmit the entire event during the (change) event binding with ng-select in Angular 14?

Is there a way to display a React component containing an array that is constantly changing due to an external function?

techniques for tracking instance variables in a Ruby controller and transferring them to an HTML view utilizing AJAX

The functionality of react-router-dom's NavLink isActive feature seems to be unreliable

The function Event.preventDefault seems ineffective when attempting to block input of CJK (Korean) characters in a v-text-field of type

Is it possible to verify whether a Node Js query is empty or not?

What is the best way to sort an array based on a person's name?

Creating a form with multiple checkboxes using Material-UI components where only a single checkbox can be selected