关于html5:nuxtjs服务端渲染中如何实现路由的跳转

一、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)