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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
javascript计时器详解
Feb 28 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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中的串行化变量和序列化对象
2006/09/05 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
vue-resourse将json数据输出实例
2017/03/08 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
express框架下使用session的方法
2019/07/31 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Python对象类型及其运算方法(详解)
2017/07/05 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python中pip的安装与使用教程
2018/08/10 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
wxPython实现带颜色的进度条
2019/11/19 Python
浅谈Python 参数与变量
2020/06/20 Python
Python中常用的os操作汇总
2020/11/05 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
毕业生个人求职信范例分享
2013/12/17 职场文书
借款担保书范文
2014/05/13 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
保安辞职信范文
2015/02/28 职场文书
新员工试用期自我评价
2015/03/10 职场文书
行政诉讼答辩状
2015/05/21 职场文书