vue2 0 router内watch监听不到route变化

2018-06-05 01:27:45vue.js问题

简单的两个路由,就无法监听到路由变化,不知道怎么回事

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script>
    var router = new VueRouter({
        routes: [{
            name: 'home',
            component: {
                template: '<div><router-link :to="{name:\'test\'}">test</router-link>&emsp;home</div>',
                watch: {
                    '$route': function(route) {
                        // 监听不到变化??
                        console.log('home', route);
                    }
                }
            },
            path: '/',
        }, {
            name: 'test',
            component: {
                template: '<div><router-link :to="{name:\'home\'}">home</router-link>&emsp;test</div>',
                watch: {
                    '$route': function(route) {
                        // 监听不到变化??
                        console.log('test', route);
                    }
                }
            },
            path: '/test'
        }],
    });
    new Vue({
        el: '#app',
        router: router,
        watch: {
            '$route': function(route) {
                //可以监听到变化
                // console.log('watch', route);
            },
        }
    });
    </script>
</body>

</html>

网友回答:

  • 冯恒智 冯恒智 2018-6-5 1:28 回复:
    已被采纳

app组件下不是能正常监听吗
子组件被切换走后就被销毁了,当然监听不到

  • jsoncode jsoncode 2018-6-5 1:33 回复:冯恒智
    正解啊!

  • jsoncode jsoncode 2018-6-5 1:34 回复:冯恒智
    也就是说,子组件只能监听自己内部的路由变化,比如有参数的情况下,修改参数会监听到变化。