Vue 路由升级 - 编程式路由

Vue 路由（vue-router）简单使用__MWY的博客-CSDN博客https://blog.csdn.net/weixin_41620505/article/details/123429114

注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

声明式	编程式
<router-link :to="...">	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 路由官网