Vue-router 编程式导航

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

基本使用

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

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

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

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

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

methods:{
    toHome(){
        let obj = {
            path : '/home',
            query:{
                a:1,
                b:2,
                c:3
            }
        }
        this.$router.push(obj)
    }
}

 如果是name和params一组

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

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

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

let obj = {
    name: 'home',
    params: {
        a: 1,
        b: 2,
        c: 3
    }
}
this.$router.replace(obj)