第4章 Vue全家桶(vue-router+vuex) - 4.4 动态路由匹配和路由组件复用

下面是项目目录：

User.vue代码：

// User.vue里面的内容
 
<template>
    <div>
        用户页面 {
  {$route.params.id}}
    </div>
</template>
 
<script>
    export default {
        //当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用
        //因为两个路由渲染了同个组件    复用高效
        created(){
            console.log(this.$route.params.id);
        },
        //响应路由参数的变化
        // watch:{
        //     $route:(to,from)=>{ //to是到哪里去，from是来自哪里
        //         console.log(to.params.id);
        //         //发起ajax 请求后端接口数据 数据驱动视图
        //     }
        // }
        beforeRouteUpdate(to,from,next){
            console.log(to.params.id);
 
            //一定要调用next，不然会阻塞整个路由  放行
            next();
        }
    }
</script>
 
<style lang="scss" scoped>
 
</