Как передать данные приложения в компонент VueRouter - PullRequest
Новая
       9

Как передать данные приложения в компонент VueRouter

0 голосов
/ 19 декабря 2018

Я использую VueRouter для загрузки шаблонов в зависимости от URL.Когда я пытаюсь использовать свойство, определенное в app.data в компонентах, я получаю [VueWarn] Property or method "role" is not defined.

Как я могу передать каждое свойство данных дочерним компонентам?

Это мойскрипт: 

const Home = { template: '<p>home page, {{role}}</p>' }
const NotFound = { template: '<p>Page not found</p>' }

const routes = [
    {path: '/', component: Home}
    {path: '*', component: NotFound}
]

Vue.use(VueRouter)
var app = new Vue({
    el: '#app',
    data: {
        role: 0,
        cookiesAlert: true
    },
    router: new VueRouter({routes})
})

1 Ответ

0 голосов
/ 24 декабря 2018

Я думаю, что параметры построения вашего маршрутизатора установлены неправильно.Обычно я предпочитаю использовать «именованные маршруты», поэтому я установлю следующее: 

const router = new VueRouter({
   routes: [
        { name: 'role', path: '/:role', component: User },
        { path: '*', component: Home }
   ]
})

И если я не правильно понимаю ваш вопрос, то вы хотите передать «данные» вродительские компоненты к дочерним компонентам через URL и читать данные в дочернем компоненте? 

const User = {
  template: '<div><br/>Role read from url is {{ $route.params.role }}</div>'
}

const Home = {
  template: '<div><br/>Welcome</div>'
}

const router = new VueRouter({
  routes: [
    { name: 'role', path: '/:role', component: User },
    { path: '*', component: Home }
  ]
})


new Vue({
  router,
  el: '#app',
  data: {
       role: 'default role'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>


<div id="app">

  
  The role is (Please change the 'role' value and click on '/User' link): <input v-model="role" type="text" /> <br/>
  
  <router-link :to="{ name: 'role', params: { role: role  }}">User</router-link>
   
 
  <router-link to="/">Home</router-link>
  
  <router-view></router-view>
  
</div>

Или, если вы не хотите использовать $route.params.role, я сделаю так, чтобы значение 'props' в параметрах конфигурации маршрутизатора было истинным.

Когда для props задано значение true, параметры route.params будут установлены как реквизиты компонента. 

const router = new VueRouter({
   routes: [
      { name: 'role', path: '/:role', component: User, props: true },
      { path: '*', component: Home }
   ]
})

И привязка к 'props' внутри дочерних компонентов. 

const User = {
   props: ['role'],
   template: '<div><br/>Role read from url is {{ role }}</div>'
}
...