Solve the problem

vue-router acquired in parent subassembly Examples

  <router-view ref="rRouter" :msg="12"></router-view>
复制代码

Examples of this subassembly can get rendered by app. $ Ref.rRouter, and in the subassembly may be acquired by props msg This parameter passing

problem found

In writing HJ end of the phone list of the time, because to use jqweui the calendar (calendar) component

<script type="text/x-template" id="home">
    <input type="text"  readonly value="" data-toggle='date' onChange=""/>
</script>
复制代码

Onchange at the time, to change this variable components date1 home, if they are directly put global function, you need global is the parent router-view components to get the components that are currently rendered examples

Complete test code

<div id="app">
    <router-view ref="rRouter" :msg="12" @input="console.log($event)"></router-view>
</div>
     var home = {
        props:['msg'],
        template: "<p>{{msg}}</p>"
    }
    var list = {
        mounted() {
            this.$emit('input','你好')
        },
        template: "<p>111</p>"
    }
    var router = new VueRouter({
        routes: [
            { path: '/', redirect: 'home' },
            { name: 'home', path: '/home', component: home },
            { name: 'list', path: '/list', component: list },
        ]
    })
    var app=new Vue({
        el: '#app',
        router: router,
    })
    console.log(app.$refs.rRouter.msg);//输出12
    app.$router.push('list');//输出你好
复制代码

Problem to be solved

vue-router refresh backward forward unchanged

Temporarily for two pages, a list of pages a details page, enter details page refresh, return to the list page does not refresh

1. activated and deactivated by the two keep-alive peculiar life cycle, each time leaving out $ destroy this component, it will not come in the next cache
2. which is controlled by the page cache include exclude, without which page
In the life cycle of components

Reference article

I did not find the original author, in the spirit of sharing jingyan.baidu.com/article/f96...

deactivated(){ this.$destroy()}www.zhihu.com/question/61…

When using include component must have a name stackoverflow.com/questions/4...

Seeking thumbs up, white wishes, will be very happy

Reproduced in: https: //juejin.im/post/5cff60c75188257a787645f3

vue-router transfer parameters subassembly