Vue Router 的使用（二）

Vue 官方文档：参考官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

 Vue Router 参考：Home | Vue Router (vuejs.org)

---

注意：我是用 vite 的方法创建项目的，有些创建项目方式的 router 使用是有区别的。 

---

八、编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

1、导航到不同的位置

注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以用 this.$router.push。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

下面举个例子：

新建 page 页面，设置一个按钮进行跳转：

<template>
    <div>
        <p>Page页面</p>
        <button @click="goPage">跳转页面</button>
    </div>
</template>
<script>
export default {
    methods:{
        goPage:function(){
        }
    }
}
</script>

（注意：App.vue 和 index.js 里面的配置跟上面例子一样，这里略） 

下面是不同的跳转方法：

（1） 跳转方式一：push 直接跳转

export default {
    methods:{
        goPage:function(){
            // 跳转：方法一
            this.$router.push('/')
        }
    }
}

（2）跳转方式二：if 条件判定

export default {
    methods:{
        goPage:function(){
            // 跳转：方法二（条件判定）
            if(123==123){  //可以写条件来决定是否跳转
                this.$router.push('/')
            }
        }
    }
}

（3）跳转方式三：通过传递对象

export default {
    methods:{
        goPage:function(){
            // 跳转：方法三࿰