如何通过Vue Router传递自定义属性？

Question

我有一个路由实例：

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

在我的组件中，我尝试控制台输出this.$route，但只得到了名字、路径、组件，没有标题属性。所以我的问题是：通过Vue路由传递自定义属性是否有效？如果有效，那么我的尝试出现了什么问题?

- vicnoob

---

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

Answer 1

您可以添加到元数据中：

 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

- JasonZeng

Answer 2

您可以使用meta来设置/获取其他数据，例如以下链接中的示例。 实时演示 我正在使用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>

- Niklesh Raut

Answer 3

你可以为自定义属性添加props到子组件中：

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'
                    }
                }
         ]
      }
   ]
})

- Pengcheng

---

我尝试了使用props但没有成功，也许meta才是答案，我现在会尝试。 - vicnoob

当然，props只是为您提供传递自定义属性的能力，但对于标题来说，使用meta是正确的选择。 - Pengcheng