[vue] VueRouter编程式路由

思考：使用路由跳转时，都经过了router-link标签，最终渲染成了a标签供用户点击

1.如果最终想渲染成其他标签时，该怎么办，例如button，img？

2.如果想写一些逻辑直接控制跳转，不经过用户点击就触发跳转

这些场景想通过router-link来实现，都是比较麻烦的事。

VueRouter提供了编程式路由的API，使用这些API可以完美解决

编程式路由： 

常用API：

1. 堆栈式跳转(跳转后浏览器可以"后退") : $router.push()

2. 替换式跳转(跳转后无法后退) : $router.replace()

3. 前进 : $router.forward()

4. 后退 : $router.back()

堆栈式跳转 和 替换式跳 转这两个API都接受一个配置配置对象，和router-link里的对象写法一样：

$router.push({
    path:"a/b/c",
    params:{
        valueA:"xxx",
        valueB:"xxx"
    }
})

示例代码：

<template>
  <div>
    <button @click="showA">展示A组件</button>
    <button @click="showB">展示B组件</button>
    <button @click="last">后退</button>
    <button @click="next">前进</button>
    <router-view></router-view>
  </div>
</template>

export default {
    methods:{
        showA(){
            this.$router.push({
                path:'/a',
                params:{
                    key1:value1
                }
            })
        },
        
        .....
        
        last(){
            this.$router.back()
        }

    }
}