vue中refs属性和router路由

Vue 中 $refs 的使用

vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取

添加ref属性

<div id="app">
    <h1 ref="h1Ele">这是H1</h1>
    <hello ref="ho"></hello>
    <button @click="getref">获取H1元素</button>
</div>

获取注册过 ref 的所有组件或元素

methods: {
   
    getref() {
   
       // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
        console.log(this.$refs.h1Ele.innerText);
        this.$refs.h1ele.style.color = 'red';// 修改html样式
        console.log(this.$refs.ho.msg);// 获取组件数据
        console.log(this.$refs.ho.test);// 获取组件的方法
    }
}

vue-router 基本使用

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

点击之后，怎么做到正确的对应，比如，我点击home 按钮ÿ