vue-03-路由-路由跳转的方式

1、第一种就是我们很熟悉的直接在 router-link 里面 to 属性后接路径，或者是通过路由 name 属性绑定

<li>
   <router-link :to="/" class="nav-link" >主页</router-link>
   <router-link :to="{name : 'indexLink'}" class="nav-link" >主页</router-link>
</li>

2、绑定一个方法，通过方法触发

<template>
    <div>
        <h1>HOME</h1>
        <button @click="goToMenu" class="btn">返回上一次浏览页面</button>
    </div>
</template>

<script>
    export default({
        methods: {
            goToMenu(){
                // this指代的是对象 $router是固定方法，go（-1）则是上次浏览页面
                this.$router.go(-1) 
            }
        }
    })
</script>

 3、指定跳转的地址：通过replace 方法.通过 replace（），指定需要跳转到的路由的 path 路径

<template>
    <div>
        <h1>HOME</h1>
        <button @click="goToMenu" class="btn">点击跳转</button>
    </div>
</template>

<script>
    export default({
        methods: {
            goToMenu(){
            
                this.$router.replace('/menu')
            }
        }
    })
</script>

4、跳转到指定的路由名字下：通过 replace（），指定需要跳转的路由的 name 属性 {name:'menuLink'}

template>
    <div>
        <h1>HOME</h1>
        <button @click="goToMenu" class="btn">点击跳转</button>
    </div>
</template>

<script>
    export default({
        methods: {
            goToMenu(){
            
                this.$router.replace({name:'menuLink'})
            }
        }
    })
</script>

 5、最常用的，push 方法：该方法和replace方法一样，即可 通过路由地址跳转，也可通过路由名字跳转

<template>
    <div>
        <h1>HOME</h1>
        <button @click="goToMenu" class="btn">点击跳转</button>
    </div>
</template>

<script>
    export default({
        methods: {
            goToMenu(){

                this.$router.push('/menu')

                 this.$router.push({name:'menuLink'})
            }
        }
    })
</script>

 ps：既然 replace 和 push 都能进行路由的 path路径、name属性 跳转，name他们的区别在哪里？

replace：通过replace 跳转的路由，不会存在在浏览器的 历史记录里，只会将需要跳转的路由替换当前的路由

push：通过push 跳转的路由，存在于浏览器的历史记录中，可以通过 浏览器的前进后退按钮。回到之前会之后的路由