What is the best way to send a custom property through Vue router?

Question

What is the best way to send a custom property through Vue router?

I'm currently working with a route instance:

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: MainContainer,
      redirect: '/news/list',
      children: [
        {
          path: 'advertisement/create',
          name: 'Create Advertisement',
          title: 'This is title of the page'
          component: CreateAdvertisement
        }
      ]
    }
  ]
})

While working on my component, I attempted to access this.$route and found that it only contained the properties name, path, and component, with no title property present. This led me to question: Is it possible to pass a custom property via Vue router? If so, what could be causing my attempt to fail?

javascript vue.js vue-router

Answer 1

Answer №1

To enhance the metadata, you can:

 const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: MainContainer,
      redirect: '/news/list',
      children: [
        {
          path: 'advertisement/create',
          name: 'Create Advertisement',
          title: 'This is title of the page'
          component: CreateAdvertisement,
          meta:{
           // place your enhancements here
           additionalKey: additionalValue
          }
        }
      ]
    }
  ]
})

https://router.vuejs.org/guide/advanced/meta.html

Answer 2

To enhance the metadata, you can:

 const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: MainContainer,
      redirect: '/news/list',
      children: [
        {
          path: 'advertisement/create',
          name: 'Create Advertisement',
          title: 'This is title of the page'
          component: CreateAdvertisement,
          meta:{
           // place your enhancements here
           additionalKey: additionalValue
          }
        }
      ]
    }
  ]
})

https://router.vuejs.org/guide/advanced/meta.html

Answer 3

Answer №2

Utilize the meta tag to manage additional data as shown in the example provided in the link below:

Live Fiddle

I am changing the Title using this.$parent.title.

const http404 = { 
template: '<div>http404 path is : {{$route.path}}</div>',
  mounted(){
    console.log(this.$route.path);
    this.$parent.title ="http404 Page";
  }
}
const index = { 
template: '<div>index path is : {{$route.path}}</div>',
  mounted(){
  this.$parent.title ="Index Page";
    console.log(this.$route.path);
  }
}
const panda = { 
  template: '<div>panda path is : {{$route.path}}</div>',
  mounted(){
  this.$parent.title ="panda Page";
     console.log(this.$route.path);
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
  {
        path: "/",
        name: "root",
        redirect: '/index'
      },
      {
        path: "/index",
        name: "index",
        component: index
      },
      {
        path: "/panda",
        name: "panda",
        component: panda
      },
      //...
      {
        path: "**",
        name: "http404",
        component: http404
      }
    ]
})

new Vue({
router,
  el: '#app',
  data:{
  title:"NA"
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<div>Page : {{title}}</div>
 <router-link to="/">Root</router-link> |
 <router-link to="/index">Index</router-link> |
 <router-link to="/panda">Panda</router-link> |
 <router-link to="/http404">http404</router-link>
  <router-view></router-view>
</div>

Answer 4

Utilize the meta tag to manage additional data as shown in the example provided in the link below:

Live Fiddle

I am changing the Title using this.$parent.title.

const http404 = { 
template: '<div>http404 path is : {{$route.path}}</div>',
  mounted(){
    console.log(this.$route.path);
    this.$parent.title ="http404 Page";
  }
}
const index = { 
template: '<div>index path is : {{$route.path}}</div>',
  mounted(){
  this.$parent.title ="Index Page";
    console.log(this.$route.path);
  }
}
const panda = { 
  template: '<div>panda path is : {{$route.path}}</div>',
  mounted(){
  this.$parent.title ="panda Page";
     console.log(this.$route.path);
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
  {
        path: "/",
        name: "root",
        redirect: '/index'
      },
      {
        path: "/index",
        name: "index",
        component: index
      },
      {
        path: "/panda",
        name: "panda",
        component: panda
      },
      //...
      {
        path: "**",
        name: "http404",
        component: http404
      }
    ]
})

new Vue({
router,
  el: '#app',
  data:{
  title:"NA"
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<div>Page : {{title}}</div>
 <router-link to="/">Root</router-link> |
 <router-link to="/index">Index</router-link> |
 <router-link to="/panda">Panda</router-link> |
 <router-link to="/http404">http404</router-link>
  <router-view></router-view>
</div>

Answer 5

Answer №3

To customize a property in the child component, simply add the props to the children component declaration:

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: MainContainer,
            redirect: '/news/list',
            children: [
                {
                    path: 'advertisement/create',
                    name: 'Create Advertisement',
                    component: CreateAdvertisement,
                    props: {
                        title: 'Custom title for the page'
                    }
                }
         ]
      }
   ]
})

Answer 6

To customize a property in the child component, simply add the props to the children component declaration:

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: MainContainer,
            redirect: '/news/list',
            children: [
                {
                    path: 'advertisement/create',
                    name: 'Create Advertisement',
                    component: CreateAdvertisement,
                    props: {
                        title: 'Custom title for the page'
                    }
                }
         ]
      }
   ]
})

What is the best way to send a custom property through Vue router?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to prevent my timer from resetting whenever I refresh the page?

How to show line breaks in MySQL text type when rendering in EJS

Adjusting the transparency of numerous elements using JavaScript or jQuery

Javascript Calculator with Dual Input Fields

"Make your slides smooth and responsive with the unslick option in slick

When attempting to add a new element to an array, the JSON key is mistakenly assigned a number instead of an array

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Are you wondering about the correct way to install eslint-config-airbnb without encountering any "UNMET PEER DEPENDENCY"

What could be the reason for the Laravel middleware CORS not functioning properly in conjunction with Vue

javascript display hide choose among

methods for transferring information from a website to a smartphone using SMS

Can we improve the coding of this as it seems inefficient and uses up too much room?

"Performing a MongoDB Node query within the time frame of 1 hour from

"Simultaneously creating a Firebase user account and populating the database with user

React JS project experiencing issues with Material UI components not functioning properly

Angular ng-bind-html directive allows you to bind HTML content to an

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

Using React and Ant Design: Sharing state between multiple <Select> components within a <Form> element