Как передать данные приложения в компонент VueRouter
Я использую 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})
})
Используйте vuex, как сказал @Psidom. Дочерние компоненты не имеют того же общего, что и родительские компоненты.
В этом случае вы должны использовать Vuex, как это было предложено в двух приведенных выше комментариях.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что параметры конструкции вашего роутера настроены неправильно. Обычно я предпочитаю использовать «именованные маршруты», поэтому я установлю следующее:
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» в параметрах конфигурации маршрутизатора было истинным.
When props is set to true, the route.params will be set as the component props.
const router = new VueRouter({
routes: [
{ name: 'role', path: '/:role', component: User, props: true },
{ path: '*', component: Home }
]
})
И привяжите к «реквизитам» внутри дочерних компонентов.
const User = {
props: ['role'],
template: '<div><br/>Role read from url is {{ role }}</div>'
}
Взгляните на vuex, если вы хотите совместно использовать глобальные данные в своем приложении.