如何通过Vue路由器传递自定义属性

Question

I have 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
        }
      ]
    }
  ]
})

In my component, i tried to console this.$route but I got only name, path, component and there is no title property there. So my question is: Is this valid to pass a custom property via Vue router? If there is, where the problem with my attemp?

Answer 1

You can use meta to set/get other data like below example in link

Live Fiddle

I am using this.$parent.title to change 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 2

You can add to the meta:

 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:{
           // here
           key: value
          }
        }
      ]
    }
  ]
})

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

Answer 3

you can add the props for the custom property to the children component:

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