编程式导航

编程式导航是通过js进行导航驱动，之前声明式是通过点击元素进行跳转

<template>
    <div>
        <!--显示区域-->
        <router-view></router-view>
        <div class="box">
            <div class="left" @click="toHome">
                首页
            </div>
            <div class="right" @click="toSport">
                体育
            </div>
        </div>

    </div>
</template>

<script>
    export default {
       methods:{
           toHome(){
               this.$router.push("/home")
           },
            toSport(){
               this.$router.push("/sport")
           }
       }
    }
</script>

<style scoped>
.box{
    display: flex;
}
.box  .left{
    flex:1;
    line-height:40px;
    background: orange;
    color: white;
    text-align: center;
}
.box  .right{
     flex:1;
    line-height:40px;
    background: skyblue;
    color: white;
    text-align: center;
}
</style>

$router是vue-router提供的函数钩子，内置了所有的关于路由跳转的方法

如果配置了vue-router就可以使用$router方法,不用再配置Vue.prototype.***

除了可以跳转之外和声明式类似的是也可以进行参数挂载

 1  toHome(){
 2                let obj={
 3                    path:'/home',
 4                    query:{
 5                        a:1,b:2,c:3
 6                    }
 7                }
 8                this.$router.push(obj)
 9            },
10             toSport

如果是name和params一组

1 let obj = {
2     name: 'home',
3     params: {
4         a: 1,
5         b: 2,
6         c: 3
7     }
8 }
9 this.$router.push(obj)

我们之前说过name和path之间的区别直观的体现在路由上，一个挂载参数，一个不挂载参数

除了push还有一种跳转方式，是replace，和push的区别一个会有历史记录，一个没有历史记录

1   toHome(){
2                let obj={
3                    name:'/home',
4                    parmas:{
5                        a:1,b:2,c:3
6                    }
7                }
8                this.$router.replace(obj)
9            },