RouYI-Vue-Plus4.X中的$router.push路由方法

前面的路由配置是一样的，不同之处是路由的应用方法。

方法：

第一步：

在methods对象中，定义一个参数为path的导航函数。

其中this.$router.push()是Vue Router提供的一个方法，调用时，页面会跳转到新的路由路径，同时这个新的路由地址也会显示在浏览器的地址栏中。

第二步：

用@click调用这个导航函数，并把路由路径输入参数中。

路由成功。

例如：

<div class="box"> 
<span class="right-menu-item" @click="navigation('/book')">主页</span>
</div>

export default {

 data() {
    return {}
        },
 methods: {
    navigation(path) {

      this.$router.push({
        path: path
      });
    },
}
}

<router-link>和通过$router.push方法都能实现路由功能。

两者的区别：

• <router-link>是一个Vue组件，专门用于Vue Router的导航链接。它会被渲染成一个<a>标签（默认情况下），但也可以配置为渲染成其他标签。
• @click="navigation('/book')"是在一个普通的HTML元素（这里是<span>）上监听点击事件，并通过Vue实例的方法（navigation）来触发路由跳转，在某些特定场景下，使用@click结合$router.push可能更为合适。

小伙伴们自己觉得哪一种方便就用哪一种吧。