欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

Nuxt.js的路由跳转操作(页面跳转nuxt-link)

时间:2021-04-29 10:57:01|栏目:vue|点击:

路由跳转代码如下:

<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>

上一篇:vue3.0生命周期的示例代码

栏    目:vue

下一篇:Vue 组件传值几种常用方法【总结】

本文标题:Nuxt.js的路由跳转操作(页面跳转nuxt-link)

本文地址:http://www.codeinn.net/misctech/111158.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有