VueRouter-组件复用

　　在使用路由参数时，比如从`/our/Xsan`跳转到`/our/foo`，原来的组件实例会被复用。因为这两个路由都是渲染的同一个组件，比起销毁再重建，复用则显得更加高效。不过，这也就意味着组件的生命周期钩子函数将不会被再次调用。

        解决办法：

　　1、监听`this.route`属性。通过判断`to`和`from`来获取更新的数据。

            watch:{
                "$route":function(to,from){
                    console.log("to：",to)
                    console.log("from：",from)
                }
            }

　　2、使用导航守卫的`beforeRouteUpdate`方法，也可以获取`to`和`from`，但是这个函数需要调用`next()`,否则页面不会更新。

            beforeRouteUpdate: function (to, from, next) {
                console.log("to：", to)
                console.log("from：", from)
                next()
            }

　　整体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>VueRouter-组件复用</title>
</head>

<body>
    <div id="app">
        <ul>
            <li>
                <router-link to="/">首页</router-link>
            </li>
            <li>
                <router-link to="/our/Xsan">我们</router-link>
            </li>
            <li>
                <router-link to="/our/Xsan3333">我们2</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    <script>
        var index = Vue.extend({
            template: "<h1>首页</h1>"
        })
        var our = Vue.extend({
            template: "<h1>欢迎,{{$route.params.user}}</h1>",
            mounted() {
                console.log(this.$route.params.user)
            },
            // watch:{
            //     "$route":function(to,from){
            //         console.log("to：",to)
            //         console.log("from：",from)
            //     }
            // }
            beforeRouteUpdate: function (to, from, next) {
                console.log("to：", to)
                console.log("from：", from)
                next()
            }
        })
        let router = new VueRouter({
            routes: [{
                    path: "/",
                    component: index
                },
                {
                    path: "/our/:user",
                    component: our
                },
            ]
        })
        new Vue({
            el: "#app",
            router: router
        })
    </script>
</body>

</html>

 

posted @ 2020-02-25 11:23  xsan  阅读(605)  评论(0)  编辑  收藏  举报