v-if，v-else指令导致vue-router失效？

Question

1、需求是这样的：如下图

当我点击左边链接时，右边会渲染对应的内容。这个功能我已经实现了，点击其他的新闻链接都能正确的跳转，如下：

现在问题是右边的内容是从后台取来的，所以我想在内容没加载完之前给个加载提示信息，所以我就用到了v-if,v-else指令，但是用上后，所有的链接都失效了。

2、代码部分。
将社会新闻的组件代码改成这样后确实做到了显示加载提示并正确显示消息内容，但是只能显示社会新闻的内容了，再点击其他的链接，如国内新闻，都不跳转了，不知道什么原因。

<template>
    <div class="shehui">
        <div class="title">社会新闻<a>了解更多...</a></div>
        <div v-if='showLoading' class="content">
            <div class="message" v-for='value in message'>
                <i class='iconfont'>&#xe609;</i>
                <div class="description"><a :href='value.url' target='_blank'>{{value.title}}</a></div>
                <div class="time">{{value.ctime}}</div>
            </div>
        </div>
        <div v-else class="mask">
            <load></load>
        </div>
    </div>
</template>

<script>
    import Axios from 'axios';
    import Load from '../common/loading.vue';
    import {mapState,mapMutations} from 'vuex';
    export default{
        name:'shehui',
        data(){
            return {
                showLoading:false,
            }
        },
        components:{
            'load':Load
        },
        computed:mapState({
            message:state=>state.hot.shehui
        }),
        methods:mapMutations({
            data:'GET_SHEHUI'
        }),
        beforeMount(){
            // console.log(this.message)
            var that=this;
            var api_key='ad97b50c8552dbbacead1c7c4663058d';
            var results=Axios.get('https://api.tianapi.com/social/?num=10&key='+api_key).then(function(res){
                // console.log(res.data.newslist[0])
                    setTimeout(()=>{that.showLoading=true;that.data(res.data.newslist)},2000);
                })
        }
    }
</script>


<style lang="scss">
    .shehui{
        text-align: center;
        display: inline-block;
        width:100%;
        padding:10px;
        .title{
            height:50px;
            line-height: 50px;
            font-size: 24px;
            margin-left:10px;
            border-bottom:1px solid gray;
            a{
                float:right;
                margin-left:10px;
                font-size:14px;
            }
        };
        .content{
            // display: none;
            text-align: left;
            padding:20px 40px;
            .message{
                margin-top:20px;
                .time{
                    float:right;
                }
                .description{
                    display: inline-block;
                    a{
                        text-decoration: none;
                        color:black;
                    }
                }
            }
        }
        .mask{
            text-align: left;
        }
    }
</style>

相比之前的社会新闻组件代码，改动的地方有几个点，如图

3、问题就是这样，当加入了上述三处改动后，原本正常工作的路由都失效了(除了社会新闻这个链接外)，为了方便各位调试或了解更多细节，可以把这个项目clone下来 lebawang，这个项目是正常工作的，但是没有加载提示。
项目的线上地址是https://fengyinchao.github.io...
就提供这么多吧，希望大神解答哈

Answer 1

时代在变，这审美怎么不变啊