vue路由学习-编程式路由导航

最新推荐文章于 2024-08-20 22:07:03 发布

原创最新推荐文章于 2024-08-20 22:07:03 发布 · 354 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue #路由

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue中如何使用编程式路由导航，包括通过改变hash值实现历史记录保存和监视，以及利用API调用进行路由跳转。重点讨论了`this.$router`和`this.$route`两个关键属性在路由导航中的应用。

编程式路由导航可以看作用JS的方式实现路由跳转

普通方法

window.location.href = URL

路由跳转：

改变hash值（#）实现历史记录的保存，还可进行监视
API调用

this包含两个属性：`$router`与 `$route`

this.$router.push(path) // 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path) // 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back() // 请求(返回)上一个记录路由
this.$router.go(-1) // 请求(返回)上一个记录路由
this.$router.go(1) // 请求下一个记录路由

实例

<li v-for="solo in soloArr" :key="solo.id">
	<button @click="pushShow(solo.id)">push查看</button>
	<button @click="replaceShow(solo.id)">replace查看</button>

methods: {
      pushShow (id) {
        this.$router.push(`/home/solo/msgdetail/${id}`)
      },
      replaceShow (id) {
        this.$router.replace(`/home/solo/msgdetail/${id}`)
      }
    },