vue 路由的一个问题

发布于
2020-06-12

const user = {
    template:"<div>我是默认的</div>"
}
const userA = {
    template:"<div>我是A</div>"
}
const userB = {
    template:"<div>我是B</div>"
}
const router = new VueRouter({
    routes: [
        {
            path: "/user/",
            components: {
                default: user,
                A: userA,
                B: userB
            }
        }
    ]
});
new Vue({
    router,
    methods: {
        A()
        {
            this.$router.push({ path: "user" });
        }
    }
}).$mount("#app");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">
        <div @click="A">默认</div>
        <div @click="A">A</div>
        <div @click="A">B</div>
        <router-view></router-view>
        <router-view name="A"></router-view>
        <router-view name="B"></router-view>
    </div>
    <script src="JavaScript3.js"></script>
</body>
</html>

有一个问题，为什么浏览器不需要触发点击事件就会全部渲染呢？
图片.png