vue router编程式导航-优快云博客

本文链接：https://blog.youkuaiyun.com/Linlietao0587/article/details/128379680

本文介绍了如何在Vue应用中使用Vue Router进行编程式导航，包括通过JavaScript进行页面跳转，替换当前位置，以及前进和后退操作。示例代码详细展示了不同场景下的用法，如使用`this.$router.push`、`this.$router.replace`、`this.$router.go`和`this.$router.back()`等方法。

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

vue router编程式导航

一、通过js跳转页面

导航有 router-link

1.1 新建一个Page.vue文件

<template>
    <button @click="goPage">js跳转页面-按钮</button>
</template>

<script>
export default {
    methods: {
        goPage() {
            //console.log(this.$router) //打印$router
            //this.$router.push('/') // 字符串路径
            //this.$router.push({path:"/"}) // 带有路径的对象
            //this.$router.push({path:'/user/123'}) //带有路径对象的参数
            //this.$router.push({name:'user',params:{id:1234}})//另一种形式
            //this.$router.push({path:"about",query:{name:"LLT"}})//带查询参数?
            //替换当前位置
            //this.$router.push({path:"about",query:{name:"LLT"},replace:true})
            this.$router.replace({ path: "about", query: { name: "LLT1" } })
        }
    }
}
</script>

1.2 配置路由器index.js

const routes = [
    {path:'/page',component:Page},//js跳转页面
]

1.3 配置App.vue

<router-link to="/page">js跳转页面</router-link>

二、替换当前位置

this.$router.push({path:"about",query:{name:"LLT"},replace:true})
this.$router.replace({path:"about",query:{name:"LLT1"}})

三、后退一步

this.$router.go(-1)
this.$router.back()//后退,等于go(-1)
this.$router.forword() //前进，等于go(1)