vue 最常用的跳页方法：this.$route

Alfred._.Wang

已于 2022-06-09 17:08:28 修改

阅读量832

点赞数

分类专栏： VUE项目常用知识点文章标签： vue.js 前端 javascript

于 2022-06-09 17:02:19 首次发布

本文链接：https://blog.youkuaiyun.com/CCWANGHAILONG/article/details/125206717

版权

VUE项目常用知识点专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue.js项目中如何配置和使用路由进行页面跳转，包括`$router.push`、`$router.replace`和`$router.go`的方法，并展示了具体的代码示例，如跳转到指定页面、返回上一页以及传递参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.$router.push('需要跳转到的路径名称')

this.$router.replace('需要跳转到的路径名称')

// 步数可以为正 ，也可为负数，0为刷新本页
this.$router.go('需要跳转到的步数')

项目中往往要先配置路由：

import Router from "vue-router";
const login = () =>
    import ("@/pages/login"); //登录页面
const index = () =>
    import ("@/pages/index"); //搜索页面
const questionnaire = () =>
    import ("@/pages/questionnaire"); //调查问卷  



let route = new Router({
    base: process.env.HASH === "hash" ? "/" : "/test/",
    mode: process.env.HASH === "hash" ? "hash" : "history",
    routes: [{
            path: '/:lang',
            name: 'login', //登录页面
            component: login,
            meta: {
                isNoLogin: true //无需登录信息
            }
        },
        {
            path: '/index/:lang', //搜索页面
            name: 'index',
            component: index,
            meta: {
                isOpen: true //是否可以直接访问
            }
        },
        {
            path: '/test/questionnaire/:lang',
            name: 'questionnaire', //调查问卷
            component: questionnaire
        }
    ]
});
export default route;

然后再使用路由跳页

this.$router.push('需要跳转到的路径名称')

this.$router.replace('需要跳转到的路径名称')

// 步数可以为正 ，也可为负数，0为刷新本页
this.$router.go('需要跳转到的步数') 


//我们的项目代码如下：

//跳到指定页面
this.$router.replace({ name: indexName });

//退一页面
this.$router.go(-1)

//去到指定页面
this.$router.push({
              name: "index",
              });
//可以带参数
this.$router.push({name: ' 路由的name ', params: {key: value}})
//参数取值
this.$route.params.key