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>