Vue Router 之 router.push()、route

页面中进行跳转是最常见的一种操作之一，那么 Vue Router 的 api 中最常会用到的 push 和 go 方法；

首先，在路由中配置完每个页面的常规配置后，便可在需要的地方调用 router 的操作；

import Vue from "vue";
import VueRouter from "vue-router";
 
Vue.use(VueRouter);
 
const routes = [
    {
        path : '/',
        name : 'Home',
        component : () =>
            import('../views/home/YHHome.vue')
    },
    {
        path: '/dialog',
        name: 'dialog',
        component: () => import('../components/YHDialog.vue')
    },
    {
        path : '/centerIntroduce',
        name : 'CenterIntroduce',
        component : () =>
            import('../views/centerIntroduce/CenterIntroduce.vue')
    },
];
 
const router = new VueRouter({
    mode : "history",
    base : process.env.BASE_URL,
    routes
});
 
export default router;

其中，router.push() 即跳转至不同的页面，可以使用 path 或 name 均可；该方法会向 history 中压栈当前记录，当再次点击返回上一级页面的时候则会默认返回至上一级页面中；

有进有出，与其 push 相互对应的则为 router.go()，该方法也是开发中最为常用的一中方式之一，回退至上一级页面，router.go(-1) 即可，执行后则会从 history 中找到相对应的上级压栈记录并返回；

那么，当查看官方文档的时发现 router.replace() 也是一种跳转页面的方式，但与 router.push 和 router.go 有所不同，两者间最大的差异在于是否会向 history 中添加记录；两者间方法的调用方式均为一样，但差异在于 history 上，跳转至新页面后不会记录上一层级页面的记录，更适用于从某个子页面模块中返回首页或某一层级页面时同时销毁之前已有的压栈记录；所以实际根据需求不同，调用不同的跳转方式，若实际业务需求无需有返回至上一级的操作或是某层级的子页面中跳转回至某个层级页面则可以使用该方式。

以上便是此次分享的全部内容，希望能对大家有所帮助！