2021-02-22nuxt.js服务端渲染中如何实现路由的跳转

一、nuxt.js 路由跳转

1、nuxt-link标签跳转

在html标签内使用nuxt-link跳转,相应于超链接a标签,使用方式如下:

<nuxt-link to="/">首页</nuxt-link>

2、编程式导航-JS代码内部跳转

实际项目中,很多时候都是通过在JS代码内部进行导航的跳转,使用方式如下

this.$router.push('/xxx')

具体的简单用法:

(1)先编写一个按钮,在按钮上绑定goHome( )方法。

<button @click="goHome">回到首页</button> 

(2)在<script>模块里加入goHome方法,并用this.$router.push(‘/’)导航到首页



1.  export default {   
    
2.      methods: {
    
3.          goHome () {
    
4.              this.$router.push('/home');
    
5.          }
    
6.      }
    
7.  }
    


3、其他常用方法



1.  //  后退一步记录,等同于 history.back()
    
2.  this.$router.go(-1)
    
3.  this.$router.back(-1)
    
4.  // 在浏览器记录中前进一步,等同于 history.forward()
    
5.  this.$router.go(1)
    


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容