nuxtlink 拼接path_nuxt 嵌套路由跳转方式 (不同目录下跳转)

今天研究了下nuxt 感觉路由跳转和vue的有点差别,但不是很大,总结了一点方法分享

1、同目录路由跳转,从当前目录index.vue 跳到同目录下的home.vue 路由下

这种方式很简单,直接 home 就OK了

2、嵌套路由跳转, 从当前目录 home.vue 跳到同目录下home文件夹中的title.vue

这种相对待开发中用的比较多,首先由在pages目录下有一个和home文件夹同名的home.vue,在第一步我们已经创建好了,这不是必须的(必须同名),

然后在home.vue中加入:

home/title

这样才可以切换到title.vue组件中

3、嵌套路由跳转,从当前目录 index.vue 跳到同目录下home文件夹中的title.vue, 这种相对待开发中用的也比较多,在官方文档中没有给出明确的方式,但是官方给了一种

动态添加路由的方法可以实现这一点:关键来了

在index.vue中加入:

title

关键点要把title.vue的名字改为_title.vue ,  其中id:“title” 的目的是为了使path为 /home/title ,可以把params中的id值写死,这样就是实现了嵌套路由跳转(不用在pages下建一个同名的vue文件了)

如果要在_title.vue下跳转到同目录下的xxx.vue 下 ,直接 xxx 就OK了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值