编程式路由导航 API

最新推荐文章于 2025-05-11 22:38:39 发布

weixin_43805387

最新推荐文章于 2025-05-11 22:38:39 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_43805387/article/details/101769903

本文详细介绍了Vue.js中的编程式路由导航API，包括使用`router.push`进行页面跳转，`router.replace`实现无历史记录的跳转，以及`router.back`和`router.go`进行前进和后退操作。这些方法对于理解和控制Vue应用的页面流至关重要。

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

this. $r o u t e r . p u s h (p a t h) 相当于点击路由链接 (后退 1 步, 会返回当前路由界面) t h i s .$ router.replace(path) 用新路由替换当前路由(后退1步,不可返回到当前路由界面)
this. $r o u t e r . b a c k () 后退回上一个记录路由 t h i s .$ router.go(n) 参数 n 指定步数
this. $r o u t e r . g o (- 1) 后退回上一个记录路由 t h i s .$ router.go(1) 向前进下一个记录路由

  <ul >
          <li v-for="(tech,index) in techArr" :key="tech.id">
              <span>{{tech.title}}</span>
              <button @click="pushTech(tech.id)" class="btn  btn-default btn-xs">查看(Push)</button>&nbsp;
              <button @click="replaceTech(tech.id)" class="btn btn-default btn-xs">查看(replace)</button>
          </li>

          <button @click="$router.back()">后退</button>
          <button @click="$router.go(-1)">go后退</button>
          <button @click="$router.go(1)">前进</button>
      </ul>

           pushTech(id){
                this.$router.push(`/news/tech/detail/${id}`)
            },
            replaceTech(id){
                this.$router.replace(`/news/tech/detail/${id}`)
            },