Vue组件不更新解决方法

vue组件不更新

组件不更新的状况

<style>
        .router-link-active{
            color:red
        }
    </style>
    <div id="app">
        <router-link to="/login/?id=10">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>

    </div>
    <template id='tem1'>
        <div>
            <h1>登录组件</h1>
        </div>
    </template>
    <template id='tem2'>
        <div>
            <h1>注册组件</h1>
        </div>
    </template>
    <script>
        var login = {
            template:'#tem1',
            created() {
                console.log(this.$route);
            },
        }
        var register = {
            template:'#tem2'
        }
        var routeobj = new VueRouter({
            routes:[
                {path:'/login',component:login},
                {path:'/register',component:register},
                {path:'/',redirect:'/login'}
            ]
        })
        new Vue({
            el:'#app',
            router:routeobj
        })
    </script>

可以看到，当我们第一次运行时，$route里面没有传递的id的值，这是因为运行时，页面默认加载/login路由下的login组件，我们还没有使用路由传递id的值，因此在这里 $route.query中是没有值的。但当我们点击登录时，它会跳转到 /login/?id=10 路由，其对应的login组件还应该再加载一次，但是我们可以看到他并没有重新加载，也就是说路由变了，但组件没变。

原因

这是因为组件重叠了，vue中提供了组件缓存的功能，也即是说在上面例子中，我们点击登录和注册，路由发生了变化，但组件并没有重新加载，这就导致组件还是原来的组件，它并没有重新创建。

解决方法

增加不同:key值

我们可以在< router-view> 组件占位符中添加不同的:key值，这样vue就会识别这是不同的< router-view>，就会重新加载

<div id="app">
        <router-link to="/login/?id=10">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view :key="key"></router-view>
    </div>

new Vue({
            el:'#app',
            computed: {
                key(){
                    return this.$route.path+Math.random()
                }
            },
            router:routeobj
        })

设置路由监听

<div id="app" :key="channelCode">

new Vue({
            el:'#app',
            data:{
                channelCode:"",
            },
            watch:{
                '$route':function(newUrl,oldUrl){
                    if(newUrl!=oldUrl){
                        this.channelCode=this.$route.query.channelCode;
                    }
                }
            },
            router:routeobj
        })

监听路由，如果新旧路由不相等，则通过改变Vue实例数据的方式重新加载当前路由对应的页面