router-link问题：组件内容也 变成了可点击的链接

html

<div id="app">
            <router-link to="/account">account</a>
            <router-view><router-view>
        </div>

        <template id="acc">
            <div>
                <h1>这是Account组件</h1>
                <router-link to="/account/login">登录</a>
                <router-link to="/account/register">注册</a> 
                <router-view></router-view>
            </div>

        </template>
        <template id="log">
            <div>
                <h1>Login组件</h1>
            </div>
        </template>
        <template id="reg">
            <div>
                <h1>Register组件</h1>
            </div>
        </template>

        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
        <script src="new_file.js" type="text/javascript" charset="utf-8"></script>

js

var account = {
    template:"#acc"
}
var login = {
    template:"#log"
}
var register = {
    template:"#reg"
}

var router = new VueRouter({
    routes:[
        // 此处就用组件模板名称，不能用组件名称
        { path:'/account',component:account,
          children:[
              { path:'/account/login',component:login },
              { path:'/account/register',component:register }
          ]
        }


    ]
})

new Vue({
    el:'#app',
    router
})

router-link本身就是用来跳转的链接啊，所以自然点击内容也是跳转链接