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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
js实现省市级联效果分享
Aug 10 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php中几种常见安全设置详解
2010/04/06 PHP
php教程之phpize使用方法
2014/02/12 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
javascript 日期常用的方法
2009/11/11 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
Node.js实现文件上传
2016/07/05 Javascript
npm的lock机制解析
2019/06/20 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python动态加载包的方法小结
2016/04/18 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python程序退出方式小结
2017/12/09 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python地图绘制实操详解
2019/03/04 Python
python实现祝福弹窗效果
2019/04/07 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
中班开学寄语
2014/04/04 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
Golang ort 中的sortInts 方法
2022/04/24 Golang
python标准库ElementTree处理xml
2022/05/20 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery