脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-router之nuxt动态路由设置

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

 更新时间：2018年09月26日 14:17:21   作者：HainesFreeman  
今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

方法一：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动态路由设置的两种方法小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解VueRouter 路由

    详解VueRouter 路由

    本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容，文中运用大量的图片进行讲解，感兴趣的小伙伴可以看一看这篇文章
    2021-08-08
  • vue3  mark.js 实现文字标注功能(案例代码)

    vue3  mark.js 实现文字标注功能(案例代码)

    这篇文章主要介绍了vue3  mark.js 实现文字标注功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-09-09
  • unplugin-vue-components解决命名冲突问题

    unplugin-vue-components解决命名冲突问题

    这篇文章主要介绍了unplugin-vue-components解决命名冲突问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue中的作用域CSS和CSS模块的区别

    Vue中的作用域CSS和CSS模块的区别

    这篇文章主要介绍了Vue中的作用域CSS和CSS模块的区别，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • vue实现多组关键词对应高亮显示功能

    vue实现多组关键词对应高亮显示功能

    最近小编遇到这样的问题，多组关键词，这里实现了关键词的背景色与匹配值的字体颜色值相同，下面通过定义关键词匹配改变字体颜色，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
    2019-07-07
  • Vue可左右滑动按钮组组件使用详解

    Vue可左右滑动按钮组组件使用详解

    这篇文章主要为大家详细介绍了基于Vue可左右滑动按钮组组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    这篇文章主要介绍了vue中手动封装iconfont组件(三种引用方式的封装和使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue中非父子组件通信的方法小结

    Vue中非父子组件通信的方法小结

    在Vue.js中,组件间的通信是构建复杂应用的关键,但当涉及到非父子关系的组件通信时,传统的做法就显得力不从心了,本文将深入探讨几种有效的非父子组件通信方法,并通过具体的代码示例来帮助读者理解和应用这些技术,需要的朋友可以参考下
    2024-09-09
  • vue项目里面引用svg文件并给svg里面的元素赋值

    vue项目里面引用svg文件并给svg里面的元素赋值

    这篇文章主要介绍了vue项目里面引用svg文件并给svg里面的元素赋值,本文分步骤通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-08-08
  • 基于Vue全局组件与局部组件的区别说明

    基于Vue全局组件与局部组件的区别说明

    这篇文章主要介绍了基于Vue全局组件与局部组件的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论