Nuxt.js如何实现页面路由跳转

Nuxt.js如何实现页面路由跳转？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

路由跳转代码如下：

<ul>
 <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li>
 <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li>
 <li><nuxt-link :to="{name:'plays-play'}">PLAY page</nuxt-link></li>
</ul>

注意说明：

to 前面有冒号“ : ”

to 后面跟的是路径比如“/page/index”(可以跟字符串或对象)同上↑

补充知识：nuxt的 nuxt-link 有个坑

如果你跟着nuxt的案例走，记住 ，所以目录 比如 PAGES 目录 你最好小写 pages 所有目录都小写

因为 当你敲下面哪行代码 时

<nuxt-link :to="{name: 'posts-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>

name其实指向的是路由，而路由死活区分大小写的 注意 to后面区分大小写！！！

所以如果你目录是 大写的 PAGES

以上代码要写成

<nuxt-link :to="{name: 'POSTS-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。