Vue3和Vue2中的编程式路由导航

对于基本的路由而言，我们可以直接使用<router-link>标签完成相应的路由跳转。但是有一些情况是实现不了的，比如这个跳转的是点击的一个按钮（因为根据Vue2介绍，router-link最后是会转换成a标签完成跳转），又或者跳转的操作我需要自动若干秒后跳转呢？ 这时候就可以用编程式路由导航。

比如此时，我有一个按钮，点击了它，进行响应路由的跳转。简单的一个逻辑就是，我给这个按钮绑定一个点击事件，一旦点了它，执行相应函数，在函数中我完成路由跳转。

还是以我昨天写的那个实验室网站为例，我在主页右上角放置了一个“团队管理系统”，点击它，跳转到管理系统的登陆页面。

 首先，我找到这个span，给它添加点击事件 （turnToLogin），Vue2和Vue3都一样，要绑定

<span class="team" @click="turnToLogin">
    团队管理系统
</span>

接下来就是定义函数了。

Vue2:

        methods:{
            turnToLogin(){
                this.$router.push('/login')
            }
        }

 Vue3:

import { useRouter } from 'vue-router'

setup(){
    const $router = useRouter();
    function turnToLogin(){
        //对象$router.push()可以向history对象添加新纪录
        $router.push('/login');
    }
    return {
        turnToLogin
    }
}

这里就可以完成简单的跳转了。也可以采用replace代替push，区别就是会把当前路由栈顶的记录给替换掉，也就是无法回退到跳转前的那个记录了。

当然，也都可以进行带参的跳转

Vue2:

<span class="team" @click="turnToLogin(111)">
    团队管理系统
</span>



        methods:{
            turnToLogin(id){
                this.$router.push({
                    path:'/login',
                    query:{
                        id: id
                    }
                })
            }
        }

 Vue3:

<span class="team" @click="turnToLogin('Eric')">
    团队管理系统
</span>

function turnToLogin(username){
    $router.push({
        path:'/login',
        query:{username}
    })
}

请求的url如下： 

 

 这里就先不记录 query和params传参，push和replace，还有Vue2和Vue3对于router创建的区别。 后续有时间再整理，