nuxt.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(‘/’)导航到首页

export default {   
    methods: {
        goHome () {
            this.$router.push('/home');
        }
    }
}

3、其他常用方法

//  后退一步记录,等同于 history.back()
this.$router.go(-1)
this.$router.back(-1)
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值