哈喽,大家好!这里是概念云科技,一个专注于技术分享与传播的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为正数或负数。
好了,今天的分享就到这里了。如果喜欢或对你有帮助那就三连+关注多多支持我们吧!