vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)

更新時(shí)間：2018年09月26日 14:17:21 作者：HainesFreeman

今天小編就為大家分享一篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

方法一：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前面別忘記加一個(gè)冒號(hào)，作為動(dòng)態(tài)路徑，用變量理解

2--正常路由別忘記帶引號(hào)（本身是字符串）

方法二：函數(shù)式路由

1.在listItem設(shè)置一個(gè)函數(shù)go(id）,準(zhǔn)備跳轉(zhuǎn)到詳情頁(yè)

<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.路徑中加個(gè)參數(shù)即可

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

以上這篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解VueRouter 路由
本文詳細(xì)介紹了VueRouter 路由的概念、規(guī)則、基礎(chǔ)等相關(guān)內(nèi)容，文中運(yùn)用大量的圖片進(jìn)行講解，感興趣的小伙伴可以看一看這篇文章
2021-08-08
vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
unplugin-vue-components解決命名沖突問(wèn)題
這篇文章主要介紹了unplugin-vue-components解決命名沖突問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue中的作用域CSS和CSS模塊的區(qū)別
這篇文章主要介紹了Vue中的作用域CSS和CSS模塊的區(qū)別，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-10-10
vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示功能
最近小編遇到這樣的問(wèn)題，多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過(guò)定義關(guān)鍵詞匹配改變字體顏色，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2019-07-07
Vue可左右滑動(dòng)按鈕組組件使用詳解
這篇文章主要為大家詳細(xì)介紹了基于Vue可左右滑動(dòng)按鈕組組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue中非父子組件通信的方法小結(jié)
在Vue.js中,組件間的通信是構(gòu)建復(fù)雜應(yīng)用的關(guān)鍵,但當(dāng)涉及到非父子關(guān)系的組件通信時(shí),傳統(tǒng)的做法就顯得力不從心了,本文將深入探討幾種有效的非父子組件通信方法,并通過(guò)具體的代碼示例來(lái)幫助讀者理解和應(yīng)用這些技術(shù),需要的朋友可以參考下
2024-09-09
vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值
這篇文章主要介紹了vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值,本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-08-08
基于Vue全局組件與局部組件的區(qū)別說(shuō)明
這篇文章主要介紹了基于Vue全局組件與局部組件的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08