vue-router之nuxt动态路由设置的两种方法小结


Posted in Javascript onSeptember 26, 2018

方法一:router-link

<div class="slide-item" v-for="user in shareData.users">

 <nuxt-link :to="'/community/member/'+ user.id">
  <img src="../../static/head.png" alt="">
  <p>{{user.nickname}}</p>
 </nuxt-link>

</div>

注意:

1---to前面别忘记加一个冒号,作为动态路径,用变量理解

2--正常路由别忘记带引号(本身是字符串)

方法二:函数式路由

1.在listItem设置一个函数go(id),准备跳转到详情页

<div class="mov-container" v-for="item in shareData.moments" >
 <div class="mov-item" >
  <div class="mov-img" v-for="photo in item.moment.medias" @click="go(item.moment.id)">
   <img :src="photo" alt="">
   <img src="../../assets/image/player.png" alt="" class="player">
  </div>
  <div class="mov-con">{{item.moment.content}}</div>
  <div class="mov-data">
   <div class="mov-data-l"><img :src="item.user.avatar" alt=""><span>{{item.user.nickname}}</span></div>
   <div class="mov-data-r" :class="{bg1:chose1,bg2:chose2}" @click="changeBg"><span>{{item.moment.like}}</span> </div>
  </div>
 </div>
</div>

2.路径中加个参数即可

go(id) {
 this.$router.push({
  path: '/comments/' + id,
 });
}

以上这篇vue-router之nuxt动态路由设置的两种方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
js实现文字选中分享功能
Jan 25 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 #Javascript
react-navigation之动态修改title的内容
Sep 26 #Javascript
React项目动态设置title标题的方法示例
Sep 26 #Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 #Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 #Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 #Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 #Javascript
You might like
PHP Memcached应用实现代码
2010/02/08 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
python中cPickle用法例子分享
2014/01/03 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
通过shell+python实现企业微信预警
2019/03/07 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python分布式编程实现过程解析
2019/11/08 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
认错检讨书
2014/10/02 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
党员身份证明材料
2015/06/19 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js