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


Posted in Javascript onNovember 06, 2020

路由跳转代码如下:

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

以上这篇Nuxt.js的路由跳转操作(页面跳转nuxt-link)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
iview实现图片上传功能
Jun 29 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 #Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 #Javascript
Jquery Fade用法详解
Nov 06 #jQuery
nuxt静态部署打包相对路径操作
Nov 06 #Javascript
全网小程序接口请求封装实例代码
Nov 06 #Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 #Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 #Javascript
You might like
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
JavaScript实现联动菜单特效
2020/01/07 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
使用Python生成随机密码的示例分享
2016/02/18 Python
python常见的格式化输出小结
2016/12/15 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python多任务之协程的使用详解
2019/08/26 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书