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  阅读(290)  评论(0编辑  收藏