152Vue-编程式导航$router.push\$router.go+back()

最新推荐文章于 2023-11-02 00:31:28 发布

教练我真的想敲代码

最新推荐文章于 2023-11-02 00:31:28 发布

阅读量314

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/gy_9543/article/details/107893548

版权

本文介绍了Vue-Router中的编程式导航，包括使用`$router.push`、`$router.go`、`back()`和`history`对象进行页面跳转。在实际应用中，需要注意表单内容在不同导航操作下的保留情况，如`go(-1)`会导致内容丢失，而`back()`则能保留内容。

摘要由CSDN通过智能技术生成

在这里插入图片描述

Vue-Router中常见的导航方式：

this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );1历史记录前进一位-1后退一位

带name的路由端也要声明一样的name
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document