Как я могу передать пользовательское свойство через маршрутизатор Vue - PullRequest
Новая
       7

Как я могу передать пользовательское свойство через маршрутизатор Vue

0 голосов
/ 12 октября 2018

У меня есть экземпляр маршрута: 

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

В моем компоненте я попытался утешить это. $ Route, но у меня есть только имя, путь, компонент, и там нет свойства title.Поэтому мой вопрос: допустимо ли передавать пользовательское свойство через маршрутизатор Vue?Если есть, где проблема с моей попыткой?

Ответы [ 3 ]

0 голосов
/ 12 октября 2018

Вы можете добавить к мета: 

 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

0 голосов
/ 12 октября 2018

вы можете добавить реквизиты для пользовательского свойства в дочерний компонент: 

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'
                    }
                }
         ]
      }
   ]
})
0 голосов
/ 12 октября 2018

Вы можете использовать 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>
...