[Vuejs]-How to extract Route Params via Props

by

1👍

✅

According to the docs on passing Props to Route components, you can decouple it, with the props option on the router config.

import User from './components/user/User.vue'
import Home from './components/Home.vue'

export const routes = [
    {path: '', component: Home},
    {path: '/user/:id', component: User, props: true}
]

<template>
  <div>
    <h1>The User Page</h1>
    <hr>
    <br>
    <p>Route ID: {{id}}</p>
    <button class="btn btn-primary" @click="goHome">Go to Home</button>
  </div>
</template>

<script>
  export default {
    props: ['id'],

    methods: {
      goHome() {
        this.$router.push('/')
      }
    }
  }
</script>
👤Yom T.

Leave a comment