Nuxt的路由配置以及传参

Nuxt 路由可以使用a标签进行链接跳转,例如我们创建了一个demo.vue的文件

<p>
    <a href="/demo">跳转去Demo页面</a>
</p>

但是Nuxt中有专属的标签 nuxt-link, 因此上次可以改写为:

<p>
    <nuxt-link :to="{name: 'demo'}">跳转去Demo页面</nuxt-link>
</p>

注: 在实际开发中,尽量使用标签进行跳转

Nuxt传参其实也是比较好理解的

例如我们现在新建一个commodity.vue文件,然后新建一个details文件夹,并新建一个index.vue , 要求是从commodity.vue 传递参数, 在index.vue 中接收

commodity.vue

<p>
    <nuxt-link :to="{name: 'details', params: {id: 123}}">跳转去Demo页面</nuxt-link>
</p>

index.vue

<p>传递过来的参数:{{$route.params.id}}</p>

猜你喜欢

转载自www.cnblogs.com/hspl/p/12369819.html
今日推荐