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

朴灿烈づ我的快乐病毒、 2023-07-20 10:34 16阅读 0赞

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

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 跳转的路由，存在于浏览器的历史记录中，可以通过 浏览器的前进后退按钮。回到之前会之后的路由