我是vuejs的初学者。
关于vue-router嵌套路由的一些做法我遇到了问题。
以防万一,这是一个嵌套的路由配置。
{
"cluster_name": "KMT",
"status": "yellow",
"timed_out": false,
"number_of_nodes": 1,
"number_of_data_nodes": 1,
"active_primary_shards": 452,
"active_shards": 452,
"relocating_shards": 0,
"initializing_shards": 0,
"unassigned_shards": 451,
"delayed_unassigned_shards": 0,
"number_of_pending_tasks": 0,
"number_of_in_flight_fetch": 0,
"task_max_waiting_in_queue_millis": 0,
"active_shards_percent_as_number": 50.055370985603545
}
如果我想将数据从子路由(概述)传递到父路由(仪表板)
我该如何处理?
我不希望网址有任何更改(/仪表板/概述),只是从子路径接收数据参数。
答案 0 :(得分:1)
您可能需要考虑使用Vuex作为跨不同组件共享状态的方法(如果您是初学者,可能不会这样做。)
或者,您可以在子组件中发出一个事件:
Vue.use(VueRouter);
var Parent = {
template: '<router-view @data="onData"></router-view>',
methods: {
onData(data) {
alert('Got data from child: ' + data);
},
},
};
var Child = {
template: '<div><input v-model="text"><button @click="onClick">Click Me</button></div>',
data() {
return {
text: 'Hello',
};
},
methods: {
onClick() {
this.$emit('data', this.text);
},
},
};
var router = new VueRouter({
routes: [
{
path: '',
component: Parent,
children: [
{
path: '',
component: Child,
},
],
},
],
});
new Vue({
el: '#app',
router,
});
&#13;
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>
<div id="app">
<router-view></router-view>
</div>
&#13;