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

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，但是我只有名称，路径，组件，并且那里没有title属性。所以我的问题是：通过Vue路由器传递自定义属性是否有效？如果有，我的问题出在哪里？

Answer 1

您可以使用meta来设置/获取其他数据，例如下面的链接示例

Live Fiddle

我正在使用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 2

您可以添加到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

您可以将自定义属性的道具添加到子组件：

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