Vue 路由升级 - 编程式路由
Vue 路由（vue-router）简单使用
https://blog.csdn.net/weixin_41620505/article/details/123429114
注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
当你点击 时，内部会调用这个方法，所以点击 相当于调用 router.push(...) ：
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
1、编程式路由分为push和replace两种方法：
1、push：就是堆积一个一个添加进栈里；可以一步步前进后退；
例：在A点击跳转到B，在B点击在跳到C，在C到D......；在D点击浏览器后退 获取Vue的后退 事 件，就是D->C->B-->A；
2、replace：就是新添加的会把之前添加进栈的替换掉；
例：在A点击跳转到B，在B点击在跳到C，在C到D......；在D点击浏览器后退 获取Vue的后退 事 件，就是D->A；
代码示例：
//push this.$router.push({ name: 'xq', params: { id: m.id, title: m.title } }) //repalcae this.$router.replace({ name: 'xq', params: { id: m.id, title: m.title } }) //前进 和浏览器的左上角的前进一个作用 this.$router.forward() //后退 和浏览器的左上角的后退一个作用 this.$router.back() //可前进 可后退 正数是前进 负数是后退 //输入的是个number数值 n 输入多少就会前进或者后退几步 this.$router.go(n)
2、路由缓存
1、作用：让不展示的组件保持挂载，不被销毁；
示例代码：
// include 也可以省略不写，不写就是所有的组件都缓存，如果写了 就是缓存指定的组件（缓存写组件名称） <keep-alive include="[Demo]"> <router-view></router-view> </keep-alive>
Vue 路由官网
