nuxt页面跳转_【假期也要学习！】Nuxt实战之路由跳转

哈喽，大家好！这里是概念云科技，一个专注于技术分享与传播的UP。今天为大家带来的是Nuxt下路由的跳转。

我们在Vue的跳转方法，如都可以使用。

那么我们来看看Nuxt官方给我们的方法。官方给的是“在页面之间建议使用标签”。这个标签其实就是router-link换了个名字，用法如下：

to：跳转的目标页面

tag：这个标签将被浏览器解析成哪个HTML标签，默认为a标签。

以上是标签之间的不带参页面跳转。需要注意的是它们的路径写的时候带“/”则是从根路径开始，如果不带那就是从当前页面开始，如果是公共页面用到则最好把“/”加上，不然二次点击路径会重复叠加在一起导致找不到页面。那我们重点看一下携带参数的跳转。

1. router-link：用法如下：

。隐式传参，不会在URL中显示出来，必须配置路由，否则刷新以后参数就不见了。

目标页面获取参数：

this.$route.params.id

。显式传参，参数会跟在URL后面，路由配置可选。

目标页面获取参数：

this.$router.query.id

2. nuxt-link: 用法同上；

3. this.$router.push

3.1 params:

this.$router.push({ name: 'download', params: { id: '01' } }。必须配置路由哦~

目标页面获取参数：

this.$route.params.id

3.2 query:

this.$router.push({ name: 'download', query: { id: '01' } }

目标页面获取参数：

this.$route.query.id

4. this.router.replace()，用法同上。

TIPS:3与4的不同：3使用后会在history栈中添加一个记录，点击浏览器的后退会回到上一个页面，而4跳转后不会在history中留下记录，点击浏览器的后退会回到上上个页面。

5. this.$router.go(n):

向前或向后跳转n个页面，对应n为正数或负数。

好了，今天的分享就到这里了。如果喜欢或对你有帮助那就三连+关注多多支持我们吧！